<template>
  <div :data-clazz="model.clazz">
    <div class="panelTitle">{{ i18n['sequenceFlow'] }}</div>
    <div class="panelBody">
      <DefaultDetail :model="model" :on-change="onChange" :read-only="readOnly" />
      <div class="panelRow">
        <div><span style="color: red">*</span> 属性：</div>
        <el-select
          style="width:90%; font-size:12px"
          placeholder="选择流转属性"
          :disabled="readOnly"
          :value="model.flowProperties"
          @change="(e) => onChange('flowProperties', e)"
        >
          <el-option label="同意" value="1" />
          <!-- <el-option label="拒绝" value="0" /> -->
          <!-- <el-option label="其他" value="2" /> -->
        </el-select>
      </div>
      <div class="panelRow">
        <div>{{ i18n['sequenceFlow.expression'] }}：</div>
        <!-- <el-input
          style="width:90%; font-size:12px"
          type="textarea"
          :rows="4"
          :disabled="readOnly"
          :value="model.conditionExpression"
          @input="(value) => {onChange('conditionExpression', value)}"
        /> -->
        <div v-for="(item, index) in conditionList" :key="index">
          <el-select
            v-model="item.key"
            style="width:90%; font-size:12px"
            placeholder="请选择关联字段"
            clearable
            @change="onChangeSelectCondition"
          >
            <el-option-group
              v-for="group in fieldList"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="i in group.options"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
          <el-select
            v-model="item.sign"
            style="width:40%; font-size:12px"
            placeholder="请选择标识"
            clearable
            @change="onChangeCondition"
          >
            <el-option label="大于" value=">" />
            <el-option label="大于等于" value=">=" />
            <el-option label="小于" value="<" />
            <el-option label="小于等于" value="<=" />
            <el-option label="不等于" value="!=" />
            <el-option label="等于" value="==" />
          </el-select>
          <el-select
            v-if="fieldType[index].type == 'select'"
            v-model="item.value"
            style="width:90%; font-size:12px"
            placeholder="请选择"
            clearable
            @change="onChangeCondition"
          >
            <el-option v-for="type in fieldType[index].options" :key="type.value" :label="type.value" :value="type.value" />
          </el-select>
          <el-input
            v-else
            v-model="item.value"
            style="width:90%; font-size:12px"
            clearable
            @change="onChangeCondition"
          />
          <el-button v-if="conditionList.length > 1" type="text" icon="el-icon-remove-outline" @click="delDisplayCondition(index)">删  除</el-button>
          <hr v-if="conditionList.length > 1" style="background-color: #dcdfe6; border:none; height:1px;">
        </div>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="addDisplayCondition">新  增</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import DefaultDetail from './DefaultDetail'
import { templateDetails } from '@/api/process/admin/template'
export default {
  inject: ['i18n'],
  components: {
    DefaultDetail
  },
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    onChange: {
      type: Function,
      default: () => {}
    },
    templates: {
      type: Array,
      default: () => ([])
    },
    templatesBase: {
      type: Array,
      default: () => ([])
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      conditionList: [{
        key: null,
        sign: null,
        value: null
      }],
      fieldType: [{
        type: null,
        options: []
      }],
      fieldList: []
    }
  },
  watch: {
    templates(newValue) {
      this.__init()
    },
    'model.conditionExpression'(newValue) {
      // 反显数据
      let conditionExpression = this.model.conditionExpression
      conditionExpression = conditionExpression ? JSON.parse(conditionExpression) : null
      if (conditionExpression) {
        this.conditionList = conditionExpression
        this.onFormatField()
        this.$forceUpdate()
      } else {
        this.conditionList = [{
          key: null,
          sign: null,
          value: null
        }]
      }
    },
    'model.flowProperties'() {
      this.onChange('flowProperties', '1')
    }
  },
  async mounted() {
    this.onChange('flowProperties', '1')
    this.__init()
  },
  methods: {
    onChangeSelectCondition() {
      this.onFormatField()
      this.$forceUpdate()
      this.onChange('conditionExpression', JSON.stringify(this.conditionList))
    },
    onFormatField() {
      this.conditionList.forEach((con, index) => {
        this.fieldType[index] = this.onFormatType(con.key)
      })
    },
    onFormatType(value) {
      const temp = {}
      this.fieldList.forEach(list => {
        if (list.options && list.options.length) {
          list.options.forEach(item => {
            if (item.value == value) {
              temp.type = item.type
              temp.options = item.options
            }
          })
        }
      })
      return temp
    },
    onChangeCondition() {
      this.onChange('conditionExpression', JSON.stringify(this.conditionList))
    },
    async __init() {
      const templateList = []
      this.templates.forEach((item) => {
        templateList.push(this.getFieldList(item))
      })

      Promise.all(templateList).then(values => {
        this.formatTemplateData(values)
        // 反显数据
        let conditionExpression = this.model.conditionExpression
        conditionExpression = conditionExpression ? JSON.parse(conditionExpression) : null
        if (conditionExpression) {
          this.conditionList = conditionExpression
          this.onFormatField()
          this.$forceUpdate()
        }
      })
    },
    async getFieldList(id) {
      return new Promise(async(resolve, reject) => {
        await templateDetails({ template_id: id }).then(res => {
          resolve(res.data)
        }).catch(() => {
          reject()
        })
      })
    },
    formatTemplateData(template) {
      this.fieldList = []
      const templates = template || []
      const optionList = []
      templates.forEach(template => {
        const options = {}
        options.label = template.name
        options.options = []
        const formStructure = template.form_structure.list || []
        if (formStructure.length > 0) {
          formStructure.forEach(item => {
            if (item.type != 'subform') {
              options.options.push({
                label: item.name,
                type: item.type,
                value: item.model,
                options: item.options.options || []
              })
            }
          })
        }
        optionList.push(options)
      })
      this.fieldList = optionList
    },
    addDisplayCondition() {
      // 添加验证
      this.conditionList.push({
        key: null,
        sign: null,
        value: null
      })
      this.fieldType.push({
        type: null,
        options: []
      })
    },
    delDisplayCondition(index) {
      this.$confirm('是否删除条件表达式？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.conditionList.splice(index, 1)
        this.fieldType.splice(index, 1)
        this.onChangeCondition()
      })
    }
  }
}
</script>
