<!--
 * @Description : 流程管理 - 单选 - 弹窗
 * @Author      : jinxin
 * @Date        : 2023-02-15 15:44:03
-->
<template>
  <el-dialog :model-value="isShowDialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true"
    :title="title" width="380px" center>
    <el-form :model="data.form">
      <el-form-item :label="label" required v-if="type == 1">
        <el-input v-model="data.form.editValue"></el-input>
      </el-form-item>
      <el-form-item :label="label" required v-if="type == 2 || type == 6">
        <el-select placeholder="请选择" v-model="data.form.editValue" filterable style="width: 100%;">
          <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="label" required v-if="type == 3">
        <el-date-picker @change="changComValS(data.form.datelist)" v-model="data.form.datelist" value-format="YYYY/MM/DD"
          type="date" placeholder="请选择" />
      </el-form-item>
      <el-form-item :label="label" required v-if="type == 4">
        <el-date-picker @change="changComVal(data.form.datelist)" v-model="data.form.datelist" value-format="YYYY/MM/DD"
          type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item :label="label" class="write-link-many" required v-if="type == 5">
        <el-input v-model="data.form.editValue" maxlength="100" placeholder="请输入" show-word-limit type="textarea"
          resize="none" :autosize="{ minRows: 5, maxRows: 5 }" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="comClick('cancel')">取消</el-button>
        <el-button type="primary" @click="comClick('sure')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, onMounted, reactive } from 'vue';

export default defineComponent({
  // type = 1 --> 输入 || （2,6） -- > 选择 || 3 --> 日期 || 4 --> 区间日期 || 5 --> 文本域
  props: {
    isShowDialog: Boolean,
    type: Number,
    label: String,
    title: String,
    list: Array
  },
  emits: ["update:isShowDialog", 'getDragDownData'],
  setup (props, context) {
    // 生命周期
    onMounted(() => { })
    // 变量
    let data = reactive({
      form: {
        editValue: '',
        datelist: []
      }
    })
    const changComVal = (list) => {
      if (list && list.length > 0) {
        data.form.editValue = list[0] + '-' + list[1]
      } else {
        data.form.editValue = ''
      }
    }
    const changComValS = (val) => {
      data.form.editValue = val
    }
    const comClick = (type) => {
      if (type == 'sure') {
        context.emit('getDragDownData', data.form.editValue, props.type)
      }
      context.emit("update:isShowDialog", false)
    }
    return {
      data,
      props,
      comClick,
      changComVal,
      changComValS
    }
  }
})
</script>
<style scoped>
::v-deep(.el-date-editor) {
  width: 100% !important;
}
</style>