<template>
  <el-dialog
    :title="isEdit ? '编辑' : '新增'"
    :visible.sync="visible"
    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.taskNumber"
          disabled
          placeholder="系统自动生成"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="taskType"
        required
        label="任务类型"
      >
        <el-select
          style="width: 164px"
          filterable
          v-model="editForm.taskType"
          placeholder="请选择"
          @change="getMode"
        >
          <el-option
            v-for="(item, index) in selectOptions.taskType"
            :key="index"
            :label="item.desc"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        required
        prop="taskModule"
        label="任务模块"
      >
        <el-cascader
          v-if="editForm.taskType === 'TECHNOLOGY'"
          style="width: 164px"
          v-model="editForm.taskModule"
          :props="{
            emitPath: false,
            label: 'name',
            value: 'id',
          }"
          :options="technologyList"
          :show-all-levels="false"
        ></el-cascader>
        <el-select
          v-else
          style="width: 164px"
          v-model="editForm.taskModule"
          value-key=""
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in designList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="负责人"
        prop="taskLeader"
        required
      >
        <el-cascader
          style="width: 164px"
          v-model="editForm.taskLeader"
          :props="{ emitPath: false }"
          :options="employee"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="验收人"
        prop="taskAcceptanceUser"
        required
      >
        <el-cascader
          style="width: 164px"
          v-model="editForm.taskAcceptanceUser"
          :props="{ emitPath: false }"
          :options="employee"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="抄送人">
        <el-cascader
          style="width: 164px"
          v-model="editForm.ccUsers"
          :props="{ emitPath: false, multiple: true }"
          :options="employee"
          :show-all-levels="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        v-if="editForm.taskType === 'TECHNOLOGY'"
        label="紧急程度"
        prop="emergencyLevel"
        required
        class="form_item"
      >
        <el-radio-group v-model="editForm.emergencyLevel">
          <el-radio
            v-for="(
              item, index
            ) in selectOptions.emergencyLevel"
            :key="index"
            :label="item.name"
            :title="item.desc"
          >
            <svg
              t="1627697200171"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="629"
              width="18"
              height="18"
            >
              <path
                :fill="setColor(index)"
                d="M444.970667 850.090667l151.978666-64.512a85.290667 85.290667 0 0 1-151.978666 64.512z m231.765333-760.746667c89.002667 48.597333 155.818667 111.018667 199.765333 187.178667 43.946667 76.117333 64.64 165.205333 62.250667 266.581333a32 32 0 0 1-64-1.536c2.133333-90.069333-15.872-167.552-53.674667-233.045333-37.802667-65.536-95.957333-119.850667-175.018666-163.029334a32 32 0 1 1 30.72-56.192z m-390.4 188.629333a248.490667 248.490667 0 0 1 324.266667 117.162667l4.181333 8.917333 54.954667 123.392 72.448 62.72c3.968 3.413333 7.381333 7.381333 11.349333 13.824l2.517333 4.906667a53.333333 53.333333 0 0 1-27.178666 70.357333L288.213333 874.24A53.333333 53.333333 0 0 1 213.333333 825.472l-0.042666-99.968-52.992-119.082667A248.405333 248.405333 0 0 1 286.293333 277.973333z m380.288-34.986666c41.258667 22.442667 74.325333 55.210667 98.816 97.621333 24.490667 42.453333 36.309333 87.466667 35.157333 134.442667a32 32 0 1 1-64-1.578667c0.853333-35.029333-7.893333-68.437333-26.581333-100.864-18.688-32.384-43.264-56.661333-74.026667-73.472a32 32 0 0 1 30.634667-56.192z"
                p-id="630"
              ></path>
            </svg>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="重要程度"
        v-if="editForm.taskType === 'TECHNOLOGY'"
        prop="importanceLevel"
        required
        class="form_item"
      >
        <el-radio-group v-model="editForm.importanceLevel">
          <el-radio
            v-for="(
              item, index
            ) in selectOptions.importanceLevel"
            :key="index"
            :title="item.desc"
            :label="item.name"
          >
            <svg
              t="1627697337193"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="937"
              width="18"
              height="18"
            >
              <path
                :fill="setColor(index)"
                d="M858.1 315l-119 85.9c-15.8 11.4-37.8 7.7-49-8.2L541.6 181.8c-13.9-19.8-43.3-19.7-57.2 0.1L337.8 392.5c-11.1 15.9-33.1 19.7-48.9 8.4l-119.6-85.5c-25.5-18.2-60.2 3.8-54.6 34.6l68.9 380c3 16.6 17.5 28.7 34.3 28.7h598.3c17.1 0 31.7-12.4 34.4-29.3l62.3-380.7c5.1-30.5-29.6-51.9-54.8-33.7zM513.7 620.6c-43.1 0-78-34.9-78-78s34.9-78 78-78 78 34.9 78 78-34.9 78-78 78z"
                p-id="938"
              ></path>
            </svg>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="优先级"
        class="form_item"
        v-if="editForm.taskType === 'TECHNOLOGY'"
        prop="priorityLevel"
        required
      >
        <el-radio-group v-model="editForm.priorityLevel">
          <el-radio
            v-for="(
              item, index
            ) in selectOptions.priorityLevel"
            :key="index"
            :label="item.name"
            :title="item.desc"
          >
            <svg
              t="1627697676079"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1266"
              width="18"
              height="18"
            >
              <path
                d="M215.4 160.6H177c-8.9 0-16 7.2-16 16V849c0 8.9 7.2 16 16 16h38.4c8.9 0 16-7.2 16-16V176.7c0.1-8.9-7.1-16.1-16-16.1zM848.1 236c-189 152.5-378-180.6-567.1-28.2-8.8 7.1-16 21.3-16 30.1v430.9c0 8.9 7.2 9 16 1.9 189-152.5 378.1 180.7 567.1 28.2 8.9-7.1 16-21.3 16-30.1V237.9c0.1-8.8-7.1-9-16-1.9z"
                :fill="setColor(index)"
                p-id="1267"
              ></path>
            </svg>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="期望完成日期"
        prop="expectedCompletionTime"
        required
      >
        <el-date-picker
          style="width: 164px"
          v-model="editForm.expectedCompletionTime"
          value-format="yyyy-MM-dd"
          type="date"
          :picker-options="pickerOption"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>

      <br />
      <el-form-item label="任务标题">
        <el-input
          style="width: 732px"
          v-model="editForm.taskTitle"
          placeholder="任务标题"
        ></el-input>
      </el-form-item>
      <br />
      <v-editor
        height="400px"
        ref="wangeditor"
        placeholder="任务内容"
        v-model="editForm.taskContent"
        filename="files"
      ></v-editor>
    </el-form>

    <span slot="footer">
      <el-button
        v-if="isEmpId"
        size="mini"
        type="warning"
        @click="goback"
      >
        返 回
      </el-button>
      <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 {
      pickerOption: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      designList: [],
      technologyList: [],
    }
  },
  props: {
    editForm: {
      type: Object,
      default: () => ({}),
    },
    editDialog: {
      type: Boolean,
      default: false,
    },
    selectOptions: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    employee: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    visible: {
      get() {
        return this.editDialog
      },
      set(val) {
        this.$emit('update:editDialog', val)
      },
    },
    isEmpId() {
      const { empId } = this.$route.query
      return !!empId
    },
    taskTypes() {
      if (this.selectOptions.taskType) {
        return this.selectOptions.taskType
      }
      return []
    },
    modeList() {
      const { taskType } = this.editForm
      if (taskType === 'DESIGN') {
        return this.designList
      }
      if (taskType === 'TECHNOLOGY') {
        return this.technologyList
      }
      return []
    },
  },
  watch: {
    editDialog(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.editForm &&
            this.$refs.editForm.clearValidate()
        })
      }
    },
    editForm(newval, old) {
      if (newval !== old) {
        this.getMode(newval.taskType, true)
      }
    },
  },
  methods: {
    getMode(code, clear) {
      if (!clear) {
        this.$set(this.editForm, 'taskModule', '')
      }
      if (code === 'TECHNOLOGY') {
        if (this.technologyList.length === 0) {
          axios.get('sysMenu/getAllMenus').then((res) => {
            this.technologyList = delChildren(res.data)
            const otherList = { id: '-1', name: '其他任务' }
            this.technologyList.push(otherList)
          })
        }
        this.$set(this.editForm, 'emergencyLevel', 'URGENT')
        this.$set(
          this.editForm,
          'importanceLevel',
          'IMPORTANT',
        )
        this.$set(this.editForm, 'priorityLevel', 'DURING')
      } else {
        axios.post('financeTaskSpendNorm/taskPersonalCenter', {
          taskType: code,
        }).then((res) => {
          this.designList = res.data
        })
        delete this.editForm.emergencyLevel
        delete this.editForm.importanceLevel
        delete this.editForm.priorityLevel
      }
    },
    goback() {
      this.$emit('update:editDialog', false)
      this.$router.go(-1)
    },
    setColor(index) {
      if (index === 0) {
        return '#F54D66'
      }

      if (index === 1) {
        return '#FDC834'
      }
      if (index === 2) {
        return '#5DE088'
      }
    },
    onSubmit() {
      this.$refs.editForm.validate((v) => {
        if (v) {
          let url = ''
          if (this.isEdit) {
            url = 'financeTaskManagement/update'
          } else {
            url = 'financeTaskManagement/add'
          }
          delete this.editForm.createTime
          axios.post(url, this.editForm).then((res) => {
            this.$message.success(res.message)

            this.$emit('onSubmit')
          })
        }
      })
    },
  },
}
</script>
<style scoped>
.form_item >>> .el-radio {
  margin-right: 13px;
}
.form_item >>> .el-radio svg {
  vertical-align: text-bottom;
}
</style>
