<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 size="small" 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 :span="24">
          <el-form-item prop="algorithmtype" label="算法类型">
            <el-select size="small" 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.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="algorithmname" label="算法名称">
            <el-input size="small" v-model="tableForm.algorithmname" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col v-if="formatData(tableForm.algorithmtype) == 'java' || formatData(tableForm.algorithmtype) == 'db' || formatData(tableForm.algorithmtype) == 'kafka' || formatData(tableForm.algorithmtype) == 'js'" :span="24">
          <el-form-item prop="algorithmsourcelibraryid" label="算法模版">
            <el-select size="small" v-model="tableForm.algorithmsourcelibraryid" 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="formatData(tableForm.algorithmtype) == 'java' || formatData(tableForm.algorithmtype) == 'db' || formatData(tableForm.algorithmtype) == 'kafka'" :span="24">
          <el-form-item prop="datasourceid" label="数据源">
            <el-select size="small" v-model="tableForm.datasourceid" @change="changeSelectSocure('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 v-if="formatData(tableForm.algorithmtype) != 'js'" :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="algorithmdescription" label="算法说明">
            <el-input size="small" v-model="tableForm.algorithmdescription"></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="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="preparameterset" label="前置条件参数">
            <el-input size="small" type="textarea" v-model="tableForm.preparameterset"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Query } from "@/api/webApi"
import { mapGetters } from 'vuex'
export default {
  name: 'PublicPageForm',
  props: {
    labelWidth: {
      type: String,
      default: '80px'
    },
    formData: {
      type: Object,
      default: () => new Object()
    },
  },
  data () {
    return {
      tableForm: {
        serviceid: '',
        preconditions: '',
        algorithmtype: '',
        algorithmname: '',
        algorithmsourcelibraryid: '',
        executionorder: '',
        targetsource: '',
        datasourceid: '',
        computingexpression: '',
        algorithmdescription: '',
        preparameterset: ''
      },
      tableOptions: {},
      formItemArr: [],
      loading: false,
      selectType: [],
      selectAlgorithm: [],
      selectSource: [],
      selectService: []
    }
  },
  computed: {
    ...mapGetters(['authMsg']),
  },
  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: 'algorithm' }) //算法模版
    this.getSelectData('algorithmtype', 20, { type: 'category' }) //算法类型

  },
  methods: {
    //获取表单下拉数据
    getSelectData (pagecode, serviceid, datacontent) {
      const [allResult, allResultKey] = [[], []]
      allResultKey.push(pagecode)
      datacontent = { filter: datacontent }
      allResult.push(Query({ serviceid, datacontent, event: '0', page: 1, size: 9999 }))
      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 (name) {
      return typeof name == 'string' ? name.toLocaleLowerCase() : name
    },
    //获取表单下拉数据
    changeSelect (name, code) {
      switch (name) {
        case 'algorithmtype':
          const nstr = _.cloneDeep(code).toString().toLocaleLowerCase()
          const item = this.selectType.filter(item => item.code == code)
          const id = item[0].id
          if (nstr == 'java' || nstr == 'db' || nstr == 'kafka'|| nstr == 'js') {
            this.tableForm.algorithmname = ''
            this.tableForm.datasourceid = ''
            this.getSelectData('algorithmname', 20, { superiorid: id })
            this.getSelectData('datasourceid', 12, { datasourcetype: code })
          }
          break;
        default:
          break;
      }
    },
    changeSelectSocure (code) {
      const ndata = this.authMsg.filter(item => item.labelcode && item.pagecode == code)
      if (ndata?.length) {
        const nitem = ndata[0]
        const nval = this.tableForm[code]
        const { dropdownlistlabel, labelcode, dropdownlistid } = nitem
        const wdata = this.selectSource.filter(item => item[dropdownlistid] == nval)
        if (!wdata.length) return
        const witem = wdata[0]
        this.tableForm[labelcode] = witem[dropdownlistlabel]
      }
    },
    restForm () {
      this.$refs['ruleForm'].resetFields()
    },
    formatDataNull () {
      for (const key in this.tableForm) {
        if (Object.hasOwnProperty.call(this.tableForm, key)) {
          const element = this.tableForm[key]
          if (!element) {
            this.tableForm[key] = null
          }
        }
      }
    },
    // 新增/编辑-确认
    submitClickHandler () {
      let flag = false
      this.formatDataNull()
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false;
        }
      });
      return flag
    },
  }
}
</script>
