<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="PublicPageForm">
    <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item prop="serviceid" label="所属服务">
            <el-select v-model="tableForm.serviceid" placeholder="请选择">
              <el-option v-for="(item,index) in selectService" :key="index" :label="item.servicename" :value="item.serviceid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="tableForm.algorithmtype == 0" :span="24">
          <el-form-item prop="preconditions" label="执行条件">
            <el-input size="small" type="textarea" v-model="tableForm.preconditions"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="algorithmtype" label="算法类型">
            <el-select v-model="tableForm.algorithmtype" @change="changeSelect('algorithmtype',tableForm.algorithmtype)" placeholder="请选择">
              <el-option v-for="(item,index) in selectType" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="tableForm.algorithmtype == 1 || tableForm.algorithmtype == 2 || tableForm.algorithmtype == 3 || tableForm.algorithmtype == 6" :span="24">
          <el-form-item prop="algorithmname" label="算法名称">
            <el-select v-model="tableForm.algorithmname" placeholder="请选择">
              <el-option v-for="(item,index) in selectAlgorithm" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if=" tableForm.algorithmtype == 2 || tableForm.algorithmtype == 3 || tableForm.algorithmtype == 6" :span="24">
          <el-form-item prop="datasourceid" label="数据源编号">
            <el-select v-model="tableForm.datasourceid" placeholder="请选择">
              <el-option v-for="(item,index) in selectSource" :key="index" :label="item.datasourcedescribe" :value="item.datasourceid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="targetsource" label="数据源目标">
            <el-input size="small" v-model="tableForm.targetsource"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="executionorder" label="执行排序">
            <el-input size="small" v-model="tableForm.executionorder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="computingexpression" label="计算表达式">
            <el-input size="small" type="textarea" v-model="tableForm.computingexpression"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="algorithmdescription" label="算法说明">
            <el-input size="small" v-model="tableForm.algorithmdescription"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Query } from "@/api/webApi"
export default {
  name: 'PublicPageForm',
  props: {
    labelWidth: {
      type: String,
      default: '80px'
    },
    formData: {
      type: Object,
      default: () => new Object()
    },
  },
  data () {
    return {
      tableForm: {
        serviceid: '',
        preconditions: '',
        algorithmtype: '',
        algorithmname: '',
        executionorder: '',
        targetsource: '',
        datasourceid: '',
        computingexpression: '',
        algorithmdescription: ''
      },
      tableOptions: {},
      formItemArr: [],
      loading: false,
      selectType: [],
      selectAlgorithm: [],
      selectSource: [],
      selectService: []
    }
  },
  watch: {
    formData: {
      handler (obj) {
        this.tableForm = obj
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.getSelectData('serviceid', 14, { 1: 1 }) //所属服务
    this.getSelectData('datasourceid', 12, { 1: 1 }) //数据源
    this.getSelectData('algorithmname', 20, { type: '1' }) //算法名称
    this.getSelectData('algorithmtype', 20, { type: '0' }) //算法类型
  },
  methods: {
    //获取表单下拉数据
    getSelectData (pagecode, serviceid, datacontent) {
      const [allResult, allResultKey] = [[], []]
      allResultKey.push(pagecode)
      allResult.push(Query({ serviceid, datacontent, event: '0' }))
      this.getAnscyData(allResult, allResultKey)
    },
    //获取异步数据
    async getAnscyData (allResult = [], allResultKey = []) {
      this.loading = true
      if (allResult.length && allResultKey.length) {
        const results = await Promise.allSettled(allResult)
        results.map((item, index) => {
          const { status, value } = item
          if (status == 'fulfilled') {
            const { code, returnData } = value
            if (code == 0) {
              this.setFormSelectData(allResultKey[index], returnData)
            }
          }
        })
      }
      this.loading = false
    },
    setFormSelectData (name, returnData) {
      switch (name) {
        case 'serviceid':
          this.selectService = [...returnData]
          break;
        case 'algorithmtype':
          this.selectType = [...returnData]
          break;
        case 'algorithmname':
          this.selectAlgorithm = [...returnData]
          break;
        case 'datasourceid':
          this.selectSource = [...returnData]
          break
        default:
          break;
      }
    },
    formatData (returnData) {
      return typeof returnData == 'string' ? JSON.parse(returnData) : returnData
    },
    //获取表单下拉数据
    changeSelect (name, code) {
      switch (name) {
        case 'algorithmtype':
          if (code == 1 || code == 2 || code == 3 || code == 6) {
            this.tableForm.algorithmname = ''
            this.tableForm.datasourceid = ''
            this.getSelectData('algorithmname', 20, { superiorid: code })
            this.getSelectData('datasourceid', 12, { datasourcetype: code })
          }
          break;
        default:
          break;
      }
    },
    restForm () {
      this.$refs['ruleForm'].resetFields()
    },
    // 新增/编辑-确认
    submitClickHandler () {
      let flag = false
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false;
        }
      });
      return flag
    },
  }
}
</script>
