<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="matchVisible"
      @close="cancel"
    >
      <!--            <el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">-->
      <el-form
        ref="setForm"
        :rules="addRules"
        :model="model"
        label-width="250px"
        label-suffix=":"
        label-position="right"
        size="mini"
        style="width: 100%;"
      >
        <el-form-item
          label="运营名称"
          class="required-label"
          prop="operatorId"
        >
          <el-col :span="15">
            <el-select
              v-model="model.operatorId"
              placeholder="请选择运营名称"
              filterable
              clearable
              style="width:110%;height: 32px;line-height: 32px;"
              @change="changeOperator"
            >
              <el-option
                v-for="item in adminList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <!--            </el-row>-->
      <span
        slot="footer"
        class="dialog-footer"
        style="text-align: center;"
      >
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="confirm"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { updateDiagnosis, batchSetOperator } from '../../utils/diagnosis';
  import { operatorQuery } from '@/api/diagnosis';

  let vm = null;
  export default {
    props: {
      matchVisible:{
        type: Boolean,
        default: false
      },
      diagnoseLogId: {
        type: Number,
        default: 0
      },
      multipleSelection: {
        type: Array,
        default: [],
      },
      batchFlag:{
        type: Boolean,
        default: false
      },
      operateUserID: {
        type: String | Number,
        default: ''
      },
    },
    data() {
      return {
        show: false,
        title: '匹配运营',
        confirmTxt: '确定',
        cancleTxt: '',
        _promise: null,
        model:{
          operatorName:'',
          operatorId:''
        },
        adminList:'',
        addRules:{
          operatorId: [
            {required: true, message: '请选择运营人员', trigger: 'change'}
          ]
        }
      };
    },
    watch:{
      operateUserID:function () {

        if(!this.batchFlag) {
          if(this.operateUserID == 0 || this.operateUserID == null) {
            this.model.operatorId = '';
            if(this.$refs.setForm) {
              this.$refs.setForm.resetFields();
            }
          }
          else {
            this.model.operatorId = this.operateUserID;
            this.changeOperator(this.operateUserID);
          }

        }
      }
    },
    created() {
      vm = this;
      this.getAdminList();
      if(this.batchFlag) {
        this.title = '批量设置运营';
      }
    },
    methods: {
      confirm() {
        this.$refs.setForm.validate((valid) => {
          if (valid) {
            // 单个设置运营
            if (!this.batchFlag) {
              const req = {
                id: this.diagnoseLogId,
                bizType: 1,
                operatorId: this.model.operatorId,
                operatorName: this.model.operatorName
              };
              updateDiagnosis(req).then(function (res) {
                if (res.code == '000000') {
                  vm.cancel();
                  vm.$emit('search');
                } else {
                  vm.$message.error(res.message);
                }
              }).catch(function (error) {
                vm.$message.error(error);
              });
            }
            // 批量设置运营
            else {
              const ids = [];
              if (this.multipleSelection.length > 0) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                  ids.push(this.multipleSelection[i].diagnoseLogId);
                }
              }
              const req = {
                ids: ids,
                operatorId: this.model.operatorId,
                operatorName: this.model.operatorName
              };
              batchSetOperator(req).then(function (res) {
                if (res.code == '000000') {
                  vm.cancel();
                  vm.$emit('search');
                } else {
                  vm.$message.error(res.message);
                }
              }).catch(function (error) {
                vm.$message.error(error);
              });
            }
          }
        });
      },

      cancel() {
        this.model.operatorId = '';
        this.$emit('update:matchVisible', false);
      },
      getAdminList() {
        this.loading = true;
        operatorQuery().then(res => {
          this.loading = false;
          if (res.code == '000000') {
            this.adminList = res.data;
          }
        });
      },
      changeOperator(data) {
        for (let i = 0; i < this.adminList.length; i++) {
          if(data == this.adminList[i].id) {
            this.model.operatorName = this.adminList[i].name;
            break;
          }
        }
      }

    }
  };
</script>

<style lang="scss" scoped>

</style>
