<template>
  <el-dialog
    :title="isEdit ? '编辑' : '新增'"
    :visible.sync="editDialog"
    width="905px"
    :close-on-click-modal="false"
    :before-close="() => $emit('update:editDialog', false)"
  >
    <el-form
      :inline="true"
      size="mini"
      :model="editForm"
      ref="editForm"
      label-width="110px"
    >
      <el-form-item label="工单编码">
        <el-input
          style="width: 164px"
          v-model="editForm.orderNo"
          disabled
          placeholder="系统自动生成"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="orderType"
        required
        label="工单类型"
      >
        <el-select
          style="width: 164px"
          filterable
          v-model="editForm.orderType"
          @change="getMode"
          placeholder="请选择"
        >
          <el-option
            v-for="order in orderTypes"
            :key="order.key"
            :value="order.key"
            :label="order.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        required
        prop="module"
        label="工单模块"
        v-if="
          editForm.orderType === 'BUG' ||
            editForm.orderType === 'DEMAND'
        "
      >
        <el-cascader
          style="width: 164px"
          v-model="editForm.module"
          :props="{
            emitPath: false,
            label: 'name',
            value: 'id',
          }"
          :options="technologyList"
          @change="onChangeType"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="期望完成日期"
        prop="expectCompleteTime"
        required
      >
        <el-date-picker
          style="width: 164px"
          v-model="editForm.expectCompleteTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          default-time="23:59:59"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <br />
      <el-form-item label="工单标题" required prop="title">
        <el-input
          style="width: 732px"
          v-model="editForm.title"
          placeholder="工单标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="优先级" prop="priorityStatus">
        <el-select
          style="width: 164px"
          filterable
          v-model="editForm.priorityStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="(priorityStatus,
            index) in priorityStatusList"
            :key="index"
            :value="priorityStatus.value"
            :label="priorityStatus.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <br />
      <v-editor
        height="400px"
        ref="wangeditor"
        placeholder="工单内容"
        v-model="editForm.content"
        filename="files"
      ></v-editor>
      <br />
      <br />
      <el-form-item label="备注" prop="remark">
        <el-input
          style="width: 720px"
          type="textarea"
          :rows="8"
          v-model="editForm.remark"
          placeholder="备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button
        size="mini"
        @click="$emit('update:editDialog', false)"
      >
        取 消
      </el-button>
      <el-button
        size="mini"
        type="primary"
        @click="onSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import Editor from '../../components/wangeditor/index.vue'
import axios from '../../common/api/axios'
import { delChildren } from '../../utils/commonUtil'
export default {
  components: {
    'v-editor': Editor,
  },
  data() {
    return {
      priorityStatusList: [
        {
          value: 1,
          name: '低',
        },
        {
          value: 2,
          name: '中',
        },
        {
          value: 3,
          name: '高',
        },
      ],
      pickerOption: {
        disabledDate: time => {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      designList: [],
      technologyList: [],
    }
  },
  props: {
    editForm: {
      type: Object,
      default: () => ({}),
    },
    editDialog: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    employee: {
      type: Array,
      default: () => [],
    },
    orderTypes: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  watch: {
    editDialog(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.editForm &&
            this.$refs.editForm.clearValidate()
        })
      }
    },
    editFlag() {
      this.getMode(this.editForm.orderType)
    },
  },
  methods: {
    onSubmit() {
      this.$refs.editForm.validate(v => {
        if (!this.editForm.content) {
          return this.$message.warning('请输入工单内容')
        }
        if (v) {
          let url = ''
          if (this.isEdit) {
            url = 'platform/platformWorkOrder/update'
          } else {
            url = 'platform/platformWorkOrder/add'
          }
          delete this.editForm.createTime
          axios.post(url, this.editForm).then(res => {
            this.$message.success(res.message)

            this.$emit('onSubmit')
          })
        }
      })
    },
    getMode(code) {
      if (code === 'BUG' || code === 'DEMAND') {
        if (this.technologyList.length === 0) {
          axios.get('sysSaasMenu/getAllMenus').then(res => {
            this.technologyList = delChildren(res.data)
            const otherList = { id: -1, name: '其他任务' }
            this.technologyList.push(otherList)
          })
        }
      }
    },
    // 递归
    findRecursive(items, fn) {
      for (const item of items) {
        if (fn(item)) return item
        if (item.children) {
          const found = this.findRecursive(
            item.children,
            fn,
          )
          if (found) return found
        }
      }
    },
    onChangeType(v) {
      const foundItem = this.findRecursive(
        this.technologyList,
        e => e.id === v,
      )
      this.$emit('onChangeModule', foundItem)
    },
  },
}
</script>
<style scoped>
.form_item::v-deep .el-radio {
  margin-right: 13px;
}
.form_item::v-deep .el-radio svg {
  vertical-align: text-bottom;
}
</style>
