<template>
  <div >
    <el-dialog :title="$t('page.business.study.study.qxzsy')" :visible.sync="open" width="1200px" append-to-body
      :close-on-click-modal="false" style="padding: 20px 20px;">
      <div class="dialog-container">
        <el-form :model="searchForm" ref="searchForm" :inline="true">
          <el-form-item :label="$t('page.business.study.study.name') + '：'" prop="name">
            <el-input v-model="searchForm.name" :placeholder="$t('form.placeholderInput')" clearable
              style="width: 150px" @keyup.enter.native="search" />
          </el-form-item>
          <el-form-item :label="$t('page.business.study.study.sn') + '：'" prop="sn">
            <el-input v-model="searchForm.sn" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px"
              @keyup.enter.native="search" />
          </el-form-item>
          <el-form-item :label="$t('page.business.study.study.leader') + '：'" prop="leader">
            <SelectDeptUser v-model="searchForm.leader" key="ffr2Id" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
            <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="list" @selection-change="handleSelectionChange">
          <el-table-column type="selection" fixed="left" width="55" align="center" />
          <el-table-column :label="$t('page.business.study.study.name')" align="center" prop="name" />
          <el-table-column :label="$t('page.business.study.study.sn')" align="center" prop="sn" width="150px" />
          <el-table-column :label="$t('page.business.study.study.leader')" align="center" prop="leaderName"
            width="150px" />
          <el-table-column :label="$t('page.business.study.study.status')" prop="status" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 1"><span class="status-circle cg"></span>{{
                $t('page.business.study.study.statusCg') }}</span>
              <span v-if="scope.row.status === 3"><span class="status-circle syz"></span>{{
                $t('page.business.study.study.statusSyz') }}</span>
              <span v-if="scope.row.status === 5"><span class="status-circle ysd"></span>{{
                $t('page.business.study.study.statusYsd') }}</span>
              <span v-if="scope.row.status === 7"><span class="status-circle"></span>{{
                $t('page.business.study.study.statusDgd') }}</span>
              <span v-if="scope.row.status === 9"><span class="status-circle"></span>{{
                $t('page.business.study.study.statusGd') }}</span>
              <span v-if="scope.row.status === 10"><span class="status-circle"></span>{{
                $t('page.business.study.study.statusDjd') }}</span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('page.business.study.study.createDate')" align="center" prop="createTime"
            width="140" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
          @pagination="getList" />
        <el-checkbox v-model="checkedOther" @change="checkedOtherChange">{{
          $t('page.business.study.study.other') }}</el-checkbox>
        <el-input v-model="others" :disabled="!checkedOther" style="width: 400px;margin-left: 20px;" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">{{ $t('form.cancel') }}</el-button>
        <el-button type="primary" :disabled="this.selectList.length == 0 && this.others == ''" @click="handleSelect">{{
          $t('form.saveConfirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { public_studyList } from "@/api/business/public/public";
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';
export default {
  name: "SelectStudyDialog",
  components: { SelectDeptUser },
  props: {
  },
  watch: {
  },
  data() {
    return {
      checkedOther: false,
      others: '',
      selectedId: '',
      selectedName: '',
      selectList: [],
      loading: false,
      open: false,
      total: 0,
      list: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        sn: '',
        name: '',
        leader: '',
        status: '',
      }
    };
  },
  mounted() {
  },
  methods: {
    checkedOtherChange() {
      if (!this.checkedOther) {
        this.others = ''
      }
    },
    handleSelectionChange(selection) {
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.selectList = selection
      this.selectedId = _.map(this.selectList, 'id').join(',')
      this.selectedName = _.map(this.selectList, 'name').join(',')
    },
    show(val) {
      this.searchForm = _.merge({}, this.searchForm, val)
      this.selectedId = ''
      this.selectedName = ''
      this.checkedOther = false
      this.others = ''
      this.$emit('callback', { id: '', name: '', other: '' })
      this.search()
    },
    search() {
      this.searchForm.pageNum = 1;
      this.open = true
      this.selectedId = ''
      this.selectedName = ''
      this.checkedOther = false
      this.others = ''
      this.$emit('callback', { id: '', name: '', other: '' })
      this.getList();
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        sn: '',
        name: '',
        leader: '',
        status: '',
      }
      this.search()
    },
    getList() {
      public_studyList(this.searchForm).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false
      })
    },
    handleSelect() {
      let name=''
      if(this.selectedName!=''&&this.others!=''){
        name=this.selectedName+','+this.others
      }else{
        name=this.selectedName+this.others
      }
      this.$emit('callback', { id: this.selectedId, name: name, mdOther: this.others })
      this.open = false
    }
  }
};
</script>
