<template>
  <div :data-clazz="model.clazz">
    <div class="panelTitle">{{ i18n['endEvent'] }}</div>
    <div class="panelBody">
      <DefaultDetail :model="model" :on-change="onChange" :read-only="readOnly" />
      <!-- <div class="panelRow">
        <div>之后任务：</div>
        <el-select
          size="small"
          style="width:90%; font-size:12px"
          placeholder="选择任务"
          :disabled="readOnly"
          :value="model.task"
          :multiple="true"
          :filterable="true"
          @change="(e) => onChange('task', e)"
        >
          <el-option v-for="(taskValue, taskIndex) in tasks" :key="taskIndex" :label="taskValue.name" :value="taskValue.full_name" />
        </el-select>
      </div> -->
      <NodeDetail
        :model="model"
        :on-change="onChange"
        :read-only="readOnly"
        :templates="templates"
        :templates-base="templatesBase"
        :write-preview="false"
        :readonly-preview="false"
        :cc-preview="false"
      />

      <div class="panelRow">
        <div>子流程：</div>
        <el-select
          size="small"
          style="width:90%; font-size:12px"
          placeholder="选择子流程"
          :disabled="readOnly"
          clearable
          :value="model.transferProcess"
          :filterable="true"
          @change="(e) => onChange('transferProcess', e)"
        >
          <el-option v-for="(item, index) in process" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </div>

      <div class="panelRow">
        <div>是否签章：</div>
        <el-radio-group v-model="contractStatus" @change="onRadioChange">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>

      <div v-if="contractStatus == 1" class="panelRow">
        <div>模板关联字段：</div>
        <el-row style="width: 90%">
          <el-col :span="8">公司名称</el-col>
          <el-col :span="16">
            <el-select
              v-model="contract.organName"
              size="small"
              style="width:100%; font-size:12px"
              placeholder="选择公司名称"
              :disabled="readOnly"
              clearable
              :filterable="true"
              @change="onChangeSelectContract"
            >
              <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-col>

          <el-col :span="8">费用类型</el-col>
          <el-col :span="16">
            <el-select
              v-model="contract.feeType"
              size="small"
              style="width:100%; font-size:12px"
              placeholder="选择费用类型"
              :disabled="readOnly"
              clearable
              :filterable="true"
              @change="onChangeSelectContract"
            >
              <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-col>

          <el-col :span="8">报销金额</el-col>
          <el-col :span="16">
            <el-select
              v-model="contract.totalMoney"
              size="small"
              style="width:100%; font-size:12px"
              placeholder="选择报销金额"
              :disabled="readOnly"
              clearable
              :filterable="true"
              @change="onChangeSelectContract"
            >
              <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-col>

          <el-col :span="8">是否有借款</el-col>
          <el-col :span="16">
            <el-select
              v-model="contract.hasLoan"
              size="small"
              style="width:100%; font-size:12px"
              placeholder="选择是否有借款"
              :disabled="readOnly"
              clearable
              :filterable="true"
              @change="onChangeSelectContract"
            >
              <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-col>

          <el-col :span="8">情况说明</el-col>
          <el-col :span="16">
            <el-select
              v-model="contract.memo"
              size="small"
              style="width:100%; font-size:12px"
              placeholder="选择情况说明"
              :disabled="readOnly"
              clearable
              :filterable="true"
              @change="onChangeSelectContract"
            >
              <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-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import DefaultDetail from './DefaultDetail'
import NodeDetail from './NodeDetail'
import { templateDetails } from '@/api/process/admin/template'
export default {
  inject: ['i18n'],
  components: {
    DefaultDetail,
    NodeDetail
  },
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    tasks: {
      type: Array,
      default: () => ([])
    },
    onChange: {
      type: Function,
      default: () => {}
    },
    process: {
      type: Array,
      default: () => ([])
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    templates: {
      type: Array,
      default: () => ([])
    },
    templatesBase: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      fieldList: [],
      contractStatus: 0,
      contract: {
        organName: '',
        feeType: '',
        hasLoan: '',
        totalMoney: '',
        memo: ''
      }
    }
  },
  watch: {
    templates(newValue) {
      this.__init()
    },
    'model.contract'(newValue) {
      // 反显数据
      let contract = this.model.contract
      contract = contract || null
      if (contract) {
        this.contractStatus = 1
        this.contract = contract
        this.$forceUpdate()
      } else {
        this.contractStatus = 0
      }
    }
  },
  async mounted() {
    await this.__init()
  },
  methods: {
    onRadioChange(val) {
      if (val == 1) {
        this.onChange('contract', this.contract)
      } else {
        this.onChange('contract', '')
      }
    },
    async __init() {
      const templateList = []
      this.templates.forEach((item) => {
        templateList.push(this.getFieldList(item))
      })

      Promise.all(templateList).then(values => {
        this.formatTemplateData(values)
        // 反显数据
        let contract = this.model.contract
        contract = contract || null
        if (contract) {
          this.contractStatus = 1
          this.contract = contract
          this.$forceUpdate()
        } else {
          this.contractStatus = 0
        }
      })
    },
    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
    },
    onChangeSelectContract() {
      this.onChange('contract', this.contract)
    }
  }
}
</script>
