<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="600px"
    custom-class="assign-dialog-box"
    >
    <span class="title" slot="title">检查指派任务</span>
    <div class="assign-dialog-content">
      <div class="dialog-item">
        <span>单位名称：</span>
        <p>{{companyInfo.enforce_obj_name || '--'}}</p>
      </div>
      <div class="dialog-item">
        <span>单位规模：</span>
        <p>{{companyInfo.scale || '--'}}</p>
      </div>
      <div class="dialog-item">
        <span>单位地址：</span>
        <p>{{companyInfo.enforce_obj_address || '--'}}</p>
      </div>
      <div class="dialog-item-special">
        <div class="arrow-icon">
          <i class="arrow-icon-tip"></i>
          <i class="arrow-icon-tip"></i>
          <i class="arrow-icon-tip"></i>
          <i class="arrow-icon-tip"></i>
        </div>
        <div class="special-item">
          <div class="dialog-item">
            <span>原主查人员：</span>
            <p>{{user[0] || ''}}</p>
          </div>
          <div class="dialog-item right">
            <span>现主查人员</span>
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="(item, i) in excutorList"
                :key="i"
                :label="item.user_name"
                :value="item.user_id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="special-item">
          <div class="dialog-item">
            <span>原协查人员：</span>
            <p>{{user[1] || ''}}</p>
          </div>
          <div class="dialog-item right">
            <span>现协查人员</span>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="(item, i) in excutorList"
                :key="i"
                :label="item.user_name"
                :value="item.user_id">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="dialog-item">
        <span>变更原因：</span>
        <el-input
          type="textarea"
          :rows="4"
          resize="none"
          maxlength="100"
          show-word-limit
          placeholder="请输入变更原因..."
          v-model="executor_change_reason">
        </el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {getEnforceItem, executorChange} from '@/api/resource'
import { resourceMixin } from '@/mixin/resource'
export default {
  props: ['dialogInfo', 'excutorList'],
  mixins: [resourceMixin],
  data () {
    return {
      dialogVisible: false,
      executor_change_reason: '',
      value1: '',
      value2: '',
      companyInfo: {}
    }
  },
  watch: {
    'dialogInfo.id'(a) {
      if (a) {
        this.executor_change_reason = ''
        this.value1 = ''
        this.value2 = ''
        this.getEnforceItemApi(a)
      }
    }
  },
  computed: {
    user() {
      const {executor_names} = this.dialogInfo
      if (executor_names && executor_names.indexOf(',') > -1) {
        return executor_names.split(',')
      } else {
        return [executor_names]
      }
    },
    ids() {
      const {executor_ids} = this.dialogInfo
      if (executor_ids && executor_ids.indexOf(',') > -1) {
        return executor_ids.split(',')
      } else {
        return [executor_ids]
      }
    }
  },
  methods: {
    close() {
      this.dialogVisible = false
    },
    confirm() {
      const value1 = this.excutorList.find(it => it.user_id == this.value1)
      const value2 = this.excutorList.find(it => it.user_id == this.value2)
      if (!value1 && !value2) {
        this.$message.error('现主查人员和现协查人员至少填写一个！')
        return
      }
      if (!this.executor_change_reason) {
        this.$message.error('请输入变更原因！')
        return
      }
      const data = {
        main_executor_id: value1 ? value1.user_id : '',
        main_executor_name: value1 ? value1.user_name : '',
        assistant_executor_id: value2 ? value2.user_id : '',
        assistant_executor_name: value2 ? value2.user_name : '',
        executor_change_reason: this.executor_change_reason
      }
      if (!value1) {
        data['main_executor_id'] = this.ids[0] || ''
        data['main_executor_name'] = this.user[0] || ''
      }
      if (!value2) {
        data['assistant_executor_id'] = this.ids[1] || ''
        data['assistant_executor_name'] = this.user[1] || ''
      }
      executorChange(this.dialogInfo.id, data).then(res => {
        this.$message.success('指派成功');
        this.dialogVisible = false
        this.$emit('confirm')
      }).catch(e => {
        console.log(e)
      })
    },
    getEnforceItemApi(id) {
      getEnforceItem(id).then(res => {
        if (res) {
          const scale = this.unitSize.filter(it => it.id == res.enforce_obj_type)[0]
          if (scale) res.scale = scale.name
          this.companyInfo = res
        }
      })
    }
  }
}
</script>
<style lang="scss">
.assign-dialog-box {
  font-size: 14px;
  color: #333;
  .title {
    font-weight: 700;
  }
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
  .assign-dialog-content {
    padding-right: 20px;
    .dialog-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
      > span {
        min-width: 100px;
        text-align: right;
        font-weight: 700;
      }
      > p {
        padding: 0 0 0 8px;
        margin: 0;
        color: #999;
      }
    }
    .dialog-item-special {
      position: relative;
      .arrow-icon {
        position: absolute;
        left: 35%;
        top: 40px;
        display: flex;
        align-items: center;
        .arrow-icon-tip {
          width: 10px;
          height: 10px;
          border-top: 5px solid #409EFF;
          border-right: 5px solid #409EFF;
          transform: rotate(45deg);
          &:nth-child(1) {
            opacity: 0.4;
          }
          &:nth-child(2) {
            opacity: 0.6;
          }
          &:nth-child(3) {
            opacity: 0.8;
          }
          &:last-child {
            position: relative;
            left: -10px;
            width: 20px;
            height: 20px;
          }
        }
      }
      .special-item {
        display: flex;
        justify-content: space-between;
        padding-right: 50px;
        margin-bottom: 20px;
        .dialog-item {
          display: flex;
          align-items: center;
        }
        .right {
          > span {
            margin-right: 10px;
          }
          .el-input__inner {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
