<template>
  <div>
    <el-card>
      <el-form  :model="inputQuery"  label-width="150px" >
        <template v-for="(itemRow, indexRow) in fromList">
          <el-row :gutter="20" class="el-row" type="flex">
            <template v-for="(item, index) in itemRow.list">
              <el-col :span="item.width" class="el-col" type="flex">
                <div class="text item">
                  <el-form-item v-if="item.columnType =='input'"  :rules="item.checkRulesObj" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-input
                      v-model="inputQuery[item.columnName]"
                      :style="item.style"
                      :size="item.size"
                      :type="item.inputType"
                      :placeholder="item.columnDesc"
                      :disabled="item.disabled"
                      @input="executeFuc($event,'5',item.clickFuc)"
                    ></el-input>
                  </el-form-item>

                  <el-form-item v-if="item.columnType =='radio'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-radio-group :style="item.style" v-model="inputQuery[item.columnName]">
                      <el-radio
                        v-for="dict in item.lableRuleObj"
                        :key="parseInt(dict.value)"
                        :label="parseInt(dict.value)"
                        :disabled="item.disabled"
                      >{{dict.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item v-if="item.columnType =='select'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-select      :disabled="item.disabled" v-model="inputQuery[item.columnName]" :style="item.style">
                      <el-option
                        v-for="dict in item.lableRuleObj"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='selectServer'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-select
                     :style="item.style"
                      v-model="inputQuery[item.columnName]"
                      :placeholder="item.columnDesc"
                      @change="executeFuc($event,'5',item.clickFuc)"
                      :disabled="executeEval(null,item.disabledFuc,false) || item.disabled"
                      filterable
                      remote
                      :remote-method="(query) => executeFuc(query,'5',item.dataFuc)"
                      clearable>
                      <el-option
                        v-for="item in options[item.dataFuc]"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                            item.code
                          }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='date'"  :rules="item.checkRulesObj" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <el-date-picker
                      v-model="inputQuery[item.columnName]"
                      :style="item.style"
                      value-format="yyyy-MM-dd"
                      :disabled="item.disabled"
                      type="date"
                      :placeholder="item.columnDesc"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='treeCustom'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <treeselect
                      v-model="inputQuery[item.columnName]"
                      :options="menuOptions"
                      :normalizer="normalizer"
                      :show-count="true"
                      :placeholder="item.columnName"
                    />
                  </el-form-item>
                  <el-form-item v-if="item.columnType =='custom'" :prop="item.columnName">
                        <span slot="label">
                          {{item.columnDesc}}
                        </span>
                    <updateZz :inputQuery="inputQuery"
                              :formName="formName"
                    />
                  </el-form-item>
                </div>
              </el-col>
            </template>
          </el-row>
        </template>
        <div style='text-align: center; margin-bottom: 10px;margin-top: 18px ;'>
          <el-button  @click="closeDialog">取消</el-button>
          <el-button v-if="formName != 3" type="primary" @click="submitInv">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {saveYlqxzczh} from "@/api/purchase/supCert";
import {getCertType} from "@/api/purchase/supCertType";
import updateZz from "@/views/basic/manu/updateZz";
import {
  getHead,executeFuc
} from "@/utils/customConfig";

export default {
  name: "companyPilotDialog",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    formName: {
      type: Object,
      required: true,
    },
    inputQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      tableHeader:[],
      queryList:[],
      fromList:[],
      tableObj:[],
      invList:[],
      options: {
        getCertTypeMethod:[],
      },
      uploadUrl: "",
      fileList: [],
      headers: {},
      choiceFile: "选取文件",
      option: {
        img: this.inputQuery.filePath, // 裁剪图片的地址
        info: false, // 裁剪框的大小信息(即是否显示裁剪框的宽高信息)
        outputSize: 0.9, // 裁剪生成图片的质量(0.1~1之间)
        outputType: 'jpeg', // 裁剪生成图片的格式(jpg(jpg 需要传入jpeg))
        canScale: false, // 图片是否允许滚轮缩放(这个属性貌似没得用，不管设置true，false都可以滚轮缩放)
        autoCrop: true, // 是否默认生成截图框
        // 注：这里需要注意，如果是裁剪成圆形图片，那么截图框的宽高就是必须设置的，且最好宽高一样
        autoCropWidth: 0, // 默认生成截图框宽度
        autoCropHeight: 0, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例(这是比例，按两个值的比值大小进行截图框的宽高的设置，[1,1]和[100,100]是一样的)
        full: true, // 是否输出原图比例的截图
        canMove: true, // 上传图片是否可以移动
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
    }
  },
  methods: {
    submitInv(){
      if(this.formName==1){
        saveYlqxzczh(this.inputQuery,"add").then((response) => {
          if(response.code == 20000){
            this.closeDialog();
          }else{
            this.$message.error(response.message);
          }

        })
          .catch(() => {
            this.$message.error("添加失败");
          });
      }else if(this.formName==2){
        saveYlqxzczh(this.inputQuery,"edit").then((response) => {
          if(response.code == 20000){
            this.closeDialog();
          }else{
            this.$message.error(response.message);
          }

        })
          .catch(() => {
            this.$message.error("添加失败");
          });
      }
    },
    executeFuc(row,type,clickFuc,value){
      return executeFuc(this,row,type,clickFuc,value);
    },
    executeEval(row,expression,defaultRet){
      if(expression){
        return eval(expression);
      }
      return defaultRet;
    },
    getCertTypeMethod(_this,query) {
      _this.fromOptions = [];
      let cQuery = {
        searchKey: query,
        page: 1,
        limit: 10,
      };
      getCertType(cQuery)
        .then((response) => {
          _this.loading = false;
          _this.options.getCertTypeMethod = response.data || [];
        })
        .catch(() => {
          _this.loading = false;
          _this.options.findMethod= [];
        });
    },
    change(_this) {
      var pinyin = require("pinyin");
      var py = pinyin(_this.inputQuery.companyName, {
        style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
        heteronym: true,
      });
      var str = "";
      py.forEach((item) => {
        str = str + item[0];
      });
      _this.inputQuery.spell = str;
    },
  },
  components: {
    updateZz
  },
  created() {
    var type = "supcert";
    if(this.formName == 3){
      type = "supcert-auth";
    }
    this.uploadUrl = this.BASE_URL + "/udiwms/upload/register/file";
    getHead(type,"1").then((re) => {
      // 处理返回的数据
      this.tableObj = re.data;
      this.tableHeader = re.data.tableList;
      this.queryList = re.data.queryList;
      this.fromList = re.data.fromList;
    });
    this.getCertTypeMethod(this);
  },
}
</script>

<style scoped>

</style>
