
<template>
  <div>
    <!--对话框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :before-close="close"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        label-position="left"
      >
        <div class="flex">
          <el-form-item
            label="环节类型"
            class="form-item-style"
            prop="auditType"
          >
            <el-radio-group v-model="form.auditType" :disabled="true">
              <el-radio :label="1">固定环节</el-radio>
              <el-radio :label="2">自定义环节</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="环节名称"
            class="form-item-style"
            prop="auditName"
          >
            <el-input
              placeholder="请输入环节名称"
              v-model.trim="form.auditName"
              :disabled="dialogTitle === '编辑环节' && form.auditType == 1"
            />
          </el-form-item>
        </div>
        <el-form-item label="额外信息" class="form-item-style" prop="isExtra">
          <el-radio-group v-model="form.isExtra">
            <el-radio :label="true">有</el-radio>
            <el-radio :label="false">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.isExtra">
          <div class="title">
            <div class="line"></div>
            <span>额外信息列表</span>
          </div>
          <div class="extra-box">
            <span
              v-for="(item1, index1) in extraList"
              :key="index1"
              :class="['extra-item', item1.check ? '' : 'gray']"
              @click="clickExtra(index1)"
            >
              {{ item1.name }} </span
            ><br />
            <!-- 审核同意项 -->
            <el-button
              type="primary"
              class="initialization"
              icon="el-icon-plus"
              @click="addCustom(0)"
              v-if="
                (extraList[0].check && form.checkContent.length == 0) ||
                (extraList[1].check && form.rectificationContent.length == 0) ||
                (extraList[2].check && form.rejectContent.length == 0)
              "
              size="small"
              >添加</el-button
            >
            <div
              class="custom-css"
              v-if="extraList[0].check && form.checkContent"
            >
              <div
                class="custom-css-item"
                v-for="(item, index) in form.checkContent"
                :key="index"
              >
                <el-form-item
                  label="类型"
                  class="form-item-style"
                  :prop="`checkContent.${index}.customType`"
                  :rules="rules.customType"
                >
                  <el-select
                    v-model="item.customType"
                    style="width: 100%"
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="l in customType_list"
                      :key="l.name"
                      :label="l.name"
                      :value="l.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div class="flex">
                  <el-form-item
                    label="标题"
                    class="form-item-style"
                    :prop="`checkContent.${index}.customName`"
                    :rules="rules.customName"
                  >
                    <el-input
                      placeholder="请输入标题"
                      v-model.trim="item.customName"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType != '图片'"
                    label="提示语"
                    class="form-item-style"
                    :prop="`checkContent.${index}.prompt`"
                  >
                    <el-input
                      placeholder="请输入提示语"
                      v-model.trim="item.prompt"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType === '图片'"
                    label="图片张数"
                    class="form-item-style"
                    :prop="`checkContent.${index}.imgNum`"
                  >
                    <el-input-number
                      v-model="item.imgNum"
                      :min="1"
                      size="mini"
                    ></el-input-number>
                  </el-form-item>
                </div>
                <el-form-item
                  label="选项配置"
                  v-if="
                    item.customType === '下拉选择' || item.customType === '多选'
                  "
                  :prop="`checkContent.${index}.configurationOptions`"
                  :rules="rules.configurationOptions"
                >
                  <el-input
                    placeholder="多个选项以英文/分隔"
                    v-model.trim="item.configurationOptions"
                  />
                </el-form-item>
                <div style="float: right">
                  <el-button
                    type="primary"
                    style="display: inline-block"
                    icon="el-icon-plus"
                    @click="addCustom(index)"
                    size="small"
                    >添加</el-button
                  >
                  <el-button
                    type="danger"
                    style="display: inline-block"
                    icon="el-icon-delete-solid"
                    @click="delCustom(index)"
                    v-if="form.checkContent.length > 1"
                    size="small"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
            <!-- 审核整改项 -->
            <div
              class="custom-css"
              v-if="extraList[1].check && form.rectificationContent"
            >
              <div
                class="custom-css-item"
                v-for="(item, index) in form.rectificationContent"
                :key="index"
              >
                <el-form-item
                  label="类型"
                  class="form-item-style"
                  :prop="`rectificationContent.${index}.customType`"
                  :rules="rules.customType"
                >
                  <el-select
                    v-model="item.customType"
                    style="width: 100%"
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="l in customType_list"
                      :key="l.name"
                      :label="l.name"
                      :value="l.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div class="flex">
                  <el-form-item
                    label="标题"
                    class="form-item-style"
                    :prop="`rectificationContent.${index}.customName`"
                    :rules="rules.customName"
                  >
                    <el-input
                      placeholder="请输入标题"
                      v-model.trim="item.customName"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType != '图片'"
                    label="提示语"
                    class="form-item-style"
                    :prop="`rectificationContent.${index}.prompt`"
                  >
                    <el-input
                      placeholder="请输入提示语"
                      v-model.trim="item.prompt"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType === '图片'"
                    label="图片张数"
                    class="form-item-style"
                    :prop="`rectificationContent.${index}.imgNum`"
                  >
                    <el-input-number
                      v-model="item.imgNum"
                      :min="1"
                      size="mini"
                    ></el-input-number>
                  </el-form-item>
                </div>
                <el-form-item
                  label="选项配置"
                  v-if="
                    item.customType === '下拉选择' || item.customType === '多选'
                  "
                  :prop="`rectificationContent.${index}.configurationOptions`"
                  :rules="rules.configurationOptions"
                >
                  <el-input
                    placeholder="多个选项以英文/分隔"
                    v-model.trim="item.configurationOptions"
                  />
                </el-form-item>
                <div style="float: right">
                  <el-button
                    type="primary"
                    style="display: inline-block"
                    icon="el-icon-plus"
                    @click="addCustom(index)"
                    size="small"
                    >添加</el-button
                  >
                  <el-button
                    type="danger"
                    style="display: inline-block"
                    icon="el-icon-delete-solid"
                    @click="delCustom(index)"
                    v-if="form.rectificationContent.length > 1"
                    size="small"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
            <!-- 审核驳回项 -->
            <div
              class="custom-css"
              v-if="extraList[2].check && form.rejectContent"
            >
              <div
                class="custom-css-item"
                v-for="(item, index) in form.rejectContent"
                :key="index"
              >
                <el-form-item
                  label="类型"
                  class="form-item-style"
                  :prop="`rejectContent.${index}.customType`"
                  :rules="rules.customType"
                >
                  <el-select
                    v-model="item.customType"
                    style="width: 100%"
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="l in customType_list"
                      :key="l.name"
                      :label="l.name"
                      :value="l.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div class="flex">
                  <el-form-item
                    label="标题"
                    class="form-item-style"
                    :prop="`rejectContent.${index}.customName`"
                    :rules="rules.customName"
                  >
                    <el-input
                      placeholder="请输入标题"
                      v-model.trim="item.customName"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType != '图片'"
                    label="提示语"
                    class="form-item-style"
                    :prop="`rejectContent.${index}.prompt`"
                  >
                    <el-input
                      placeholder="请输入提示语"
                      v-model.trim="item.prompt"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="item.customType === '图片'"
                    label="图片张数"
                    class="form-item-style"
                    :prop="`rejectContent.${index}.imgNum`"
                  >
                    <el-input-number
                      v-model="item.imgNum"
                      :min="1"
                      size="mini"
                    ></el-input-number>
                  </el-form-item>
                </div>
                <el-form-item
                  label="选项配置"
                  v-if="
                    item.customType === '下拉选择' || item.customType === '多选'
                  "
                  :prop="`rejectContent.${index}.configurationOptions`"
                  :rules="rules.configurationOptions"
                >
                  <el-input
                    placeholder="多个选项以英文/分隔"
                    v-model.trim="item.configurationOptions"
                  />
                </el-form-item>
                <div style="float: right">
                  <el-button
                    type="primary"
                    style="display: inline-block"
                    icon="el-icon-plus"
                    @click="addCustom(index)"
                    size="small"
                    >添加</el-button
                  >
                  <el-button
                    type="danger"
                    style="display: inline-block"
                    icon="el-icon-delete-solid"
                    @click="delCustom(index)"
                    v-if="form.rejectContent.length > 1"
                    size="small"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    form1: {
      type: Object,
      default: function () {
        return {};
      },
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  filters: {},
  computed: {},
  data() {
    return {
      form: {
        isExtra: false,
        auditType: 1,
        auditName: null,
        //自定义字段
        checkContent: null,
        rectificationContent: null,
        rejectContent: null,
      },
      // 验证规则
      rules: {
        isExtra: [{ required: true, message: "请选择", trigger: "change" }],
        imgNum: [{ required: true, message: "请选择", trigger: "change" }],
        auditType: [{ required: true, message: "请选择", trigger: "change" }],
        customType: [{ required: true, message: "请选择", trigger: "change" }],
        customName: [{ required: true, message: "请输入", trigger: "change" }],
        prompt: [{ required: true, message: "请输入", trigger: "change" }],
        configurationOptions: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        auditName: [{ required: true, message: "请输入", trigger: "change" }],
      },
      // 审核项
      extraList: [
        {
          check: true,
          name: "审核同意项",
        },
        {
          check: false,
          name: "审核整改项",
        },
        {
          check: false,
          name: "审核驳回项",
        },
      ],
      // 字段类型
      customType_list: [
        { id: 1, name: "文本" },
        { id: 2, name: "下拉选择" },
        { id: 8, name: "多选" },
        { id: 5, name: "日期" },
        { id: 6, name: "时间" },
        // { id: 9, name: "日期时间" },
        { id: 7, name: "图片" },
        { id: 10, name: "视频" },
      ],
    };
  },
  created() {
    this.form = Object.assign(this.form, this.form1);
    this.form.auditType = Number(this.form.auditType);
  },
  watch: {
    dialogVisible: {
      handler: function (val) {
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      },
      immediate: false,
      deep: true,
    },
    "form.isExtra"(n) {
      if (n) {
        if (this.form.checkContent == null) {
          this.form.checkContent = [];
        }
        if (this.form.rectificationContent == null) {
          this.form.rectificationContent = [];
        }
        if (this.form.rejectContent == null) {
          this.form.rejectContent = [];
        }
      }
    },
  },
  methods: {
    // 审核项
    clickExtra(index) {
      this.extraList.forEach((item, index1) => {
        if (index1 === index) {
          item.check = true;
        } else {
          item.check = false;
        }
      });
    },
    // 添加自定义
    addCustom(index, type) {
      let data = {
        customName: null,
        customType: null,
        prompt: null,
        configurationOptions: null,
        imgNum: null,
      };
      if (this.extraList[0].check) {
        this.form.checkContent.splice(index + 1, 0, data);
      } else if (this.extraList[1].check) {
        this.form.rectificationContent.splice(index + 1, 0, data);
      } else if (this.extraList[2].check) {
        this.form.rejectContent.splice(index + 1, 0, data);
      }
    },
    // 删除自定义
    delCustom(index) {
      if (this.extraList[0].check) {
        this.form.checkContent.splice(index, 1);
      } else if (this.extraList[1].check) {
        this.form.rectificationContent.splice(index, 1);
      } else if (this.extraList[2].check) {
        this.form.rejectContent.splice(index, 1);
      }
    },
    addOrUpdate() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let isTrue = true;
          // 判断自定义字段填写
          if (this.form.isExtra) {
            if (this.form.checkContent.length > 0) {
              isTrue = this.isAllFill(this.form.checkContent);
            }
            if (this.form.rectificationContent.length > 0) {
              isTrue = this.isAllFill(this.form.rectificationContent);
            }
            if (this.form.rejectContent.length > 0) {
              isTrue = this.isAllFill(this.form.rejectContent);
            }
          }
          if (isTrue) {
            this.$emit("getform", this.form);
          }
        }
      });
    },
    isAllFill(list) {
      let isTrue = true;
      list.forEach((i) => {
        if (i.customType == null) {
          this.$message.error("请将额外信息列表填写完整");
          isTrue = false;
        }
      });
      return isTrue;
    },
    //关闭弹窗回调
    close() {
      this.$emit("close", false);
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  margin-bottom: 16px;
}
.extra-item {
  display: inline-block;
  background: #3e9dff;
  border-radius: 6px 6px 6px 6px;
  margin-right: 10px;
  color: #fff;
  padding: 7px 24px;
  cursor: pointer;
}
.gray {
  background: #f8f9fb;
  color: #909399;
}
.custom-css {
  margin-top: 12px;
}
.custom-css-item {
  background: rgba(245, 246, 248, 0.7);
  border-radius: 12px;
  padding: 15px 15px 50px 15px;
  margin-bottom: 20px;
}
.initialization {
  margin-top: 15px;
}
.el-form {
  max-height: 500px;
  overflow: auto;
}
</style>
