<template>
  <div>
    <el-card>
      <el-form v-if="queryList && queryList.length > 0" :model="filterQuery" class="query-form" size="mini" label-width="120px" v-show="showSearch" :inline="true">
        <el-row style=" display:flex;  flex-wrap: wrap; ">
          <template v-for="(item, index) in queryList" >
            <el-form-item v-if="item.columnType == 'input' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`" :key="item.id">
              <el-input
                v-model="filterQuery[item.columnName]"
                :placeholder="item.columnDesc"
                :disabled="executeEval(null,item.disabledFuc,false)"
                @keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
              <el-select v-model="filterQuery[item.columnName]"
                         :placeholder="item.columnDesc"
                         :disabled="executeEval(null,item.disabledFuc,false)"
                         clearable>
                <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' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
              <el-select
                v-model="filterQuery[item.columnName]"
                :placeholder="item.columnDesc"
                @change="executeFuc($event,'5',item.checkRules)"
                :disabled="executeEval(null,item.disabledFuc,false)"
                filterable
                remote
                :remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
                clearable>
                <el-option
                  v-for="item in options[item.clickFuc]"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
              <el-date-picker
                v-model="filterQuery[item.columnName]"
                :style="`width:${item.width+'px'}`"
                value-format="yyyy-MM-dd"
                :disabled="executeEval(null,item.disabledFuc,false)"
                type="date"
                :placeholder="item.columnDesc"
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询
          </el-button
          >
          <el-button type="primary" icon="el-icon-plus" @click="(event) => addOrderMuti()">新增</el-button>
        </el-button-group>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%"  border highlight-current-row
                @row-click="(row) => executeFuc(row,'0',tableObj.handleChangeFuc)">
      >
        <template v-for="(item, index) in tableHeader">
          <el-table-column
            v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
            type="index" :label="item.columnDesc"></el-table-column>
          <el-table-column
            v-if="item.columnType == 'selection'"
            type="selection"
            :width="item.width"
            :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
          ></el-table-column>

          <el-table-column
            v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template  slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template   slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}">{{ item.lableRuleObj[scope.row[item.columnName]] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template   slot-scope="scope">
              <el-tag :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])">
                <span>{{ item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName] }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :width="item.width"
            :key="item.columnName"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
                         :type="buttonItem.type"
                         :size="buttonItem.size"
                         :style="buttonItem.style"
                         :key="buttonItem"
                         v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
                         :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
                         @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
              >{{ buttonItem.name }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'text' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{ scope.row[item.columnName] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="filterQuery.page"
        :limit.sync="filterQuery.limit"
        @pagination="handleCurrentChange"

      ></pagination>
    </el-card>


    <el-card class="el-card">
      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <el-button type="primary" icon="el-icon-refresh" @click="addCertMuti">新增注册/备案证</el-button>
        </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>
      <el-table v-loading="loadCertLoading" :data="manuCertList" style="width: 100%" ref="table"
                highlight-current-row border >
        <template v-for="(item, index) in tableHeader2">
          <el-table-column
            v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
            type="index" :label="item.columnDesc"></el-table-column>
          <el-table-column
            v-if="item.columnType == 'selection'"
            type="selection"
            :width="item.width"
            :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
          ></el-table-column>

          <el-table-column
            v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template  slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template   slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}">{{ item.lableRuleObj[scope.row[item.columnName]] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template   slot-scope="scope">
              <el-tag :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])">
                <span>{{ item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName] }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :width="item.width"
            :key="item.columnName"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
                         :type="buttonItem.type"
                         :size="buttonItem.size"
                         :style="buttonItem.style"
                         :key="buttonItem"
                         v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
                         :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
                         @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
              >{{ buttonItem.name }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'text' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{ scope.row[item.columnName] }}</span>
            </template>
          </el-table-column>

        </template>
      </el-table>

      <pagination
        v-show="manuCertTotal>0"
        :total="manuCertTotal"
        :page.sync="filterCertQuery.page"
        :limit.sync="filterCertQuery.limit"
        @pagination="handleCertChange"

      ></pagination>


    </el-card>

    <el-dialog
      :title="formMap[formName]"
      :visible.sync="orderMutiSetVisible"
      :before-close="close"
      width="60%"
      v-if="orderMutiSetVisible"
      @close='closeDialog'
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <indexDialog
        :closeDialog="closeDialog"
        :inputQuery="inputQuery"
        :formName="formName"
      ></indexDialog>
    </el-dialog>


    <el-dialog
      :title="formCertMap[formCertName]"
      :visible.sync="manuCertDialogVisible"
      :before-close="close"
      width="60%"
      v-if="manuCertDialogVisible"
      @close='closeCertDialog'
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <manuCertDialog
        :closeDialog="closeCertDialog"
        :inputQuery="inputCertQuery"
        :formName="formCertName"
      ></manuCertDialog>
    </el-dialog>

  </div>
</template>



<script>
import indexDialog from "@/views/anno/anncmnt/manuDialog";
import manuCertDialog from "@/views/anno/anncmnt/manuCertDialog";
import {deletegg, list} from "@/api/anno/anncmntManu";
import {deleteCert, listCert} from "@/api/anno/anncmntManuCert";
import {executeFuc, getHead} from "@/utils/customConfig";

export default {
  name: "anncmntDev",
  data() {
    return {
        showSearch: true,
      filterQuery: {
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
      list: [],
      formName: 1,
      formMap: {
        1: "新增生产企业",
        2: "编辑生产企业",
      },
      inputQuery:{},
      orderMutiSetVisible: false,

      formCertName: 1,
      formCertMap: {
        1: "新增生产企业明细",
        2: "编辑生产企业明细",
      },
      inputCertQuery:{},
      manuCertDialogVisible: false,
      manuCertList: [],
      loadCertLoading: false,
      manuCertTotal: 0,
      filterCertQuery: {
        page: 1,
        limit: 10,
      },
      changeCode:"",
      actDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0];
        this.filterQuery.endTime = this.actDateRange[1];
      } else {
        this.filterQuery.startTime = null;
        this.filterQuery.endTime = null;
      }
      this.filterQuery.page = 1;
      this.getList();
      this.changeCode = "";
      this.manuCertList = [],
      this.manuCertTotal = 0
    },
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        page: 1,
        limit: 10,
      };
      this.getList();
      this.changeCode = "";
      this.manuCertList = [],
      this.manuCertTotal = 0
    },
    onCertReset() {
      this.$router.push({
        path: "",
      });
      this.filterCertQuery = {
        manuCreditCode:this.changeCode,
        page: 1,
        limit: 10,
      };
      this.getCertList();
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },
    handleCertChange(val) {
      this.filterCertQuery.page = val.page;
      this.getManufacturerList();
    },
    closeDialog(){
      this.orderMutiSetVisible = false;
      this.getList();
    },
    addOrderMuti(){
      this.inputQuery={

      }
      this.formName=1;
      this.orderMutiSetVisible = true;
    },
    editDialog(_this,row){
      _this.formName=2;
      _this.inputQuery=row;
      _this.orderMutiSetVisible = true;
    },
    closeCertDialog(){
      this.manuCertDialogVisible = false;
      this.getCertList();
    },
    addCertMuti(){
      var changeCode =  this.changeCode;
      if(!changeCode){
        this.$message.error("请先选择企业");
        return;
      }
      this.inputCertQuery={
          manuCreditCode:changeCode
      }
      this.formCertName=1;
      this.manuCertDialogVisible = true;
    },
    editCertDialog(_this,row){
      _this.formCertName=2;
      _this.inputCertQuery=row;
      _this.manuCertDialogVisible = true;
    },
    supCertClick(_this,row) {
      _this.changeCode= row.creditCode
      _this.onCertReset();
    },
    getList() {
      this.loading = true;
      list(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    deleteDialog(_this,row) {
      _this.$confirm("确认删除吗?", "提示", {
          type: "warning",
        })
        .then(() => {
      deletegg(row)
        .then((response) => {
          if(response.code == 20000){
            _this.getList()
          }else{
            _this.$message.error(response.message);
          }
        })
        .catch(() => {
          _this.$message.error(response.message);
        });
          });
    },

    getCertList() {
      this.loadCertLoading = true;
      listCert(this.filterCertQuery)
        .then((response) => {
          this.loadCertLoading = false;
          this.manuCertList = response.data.list || [];
          this.manuCertTotal = response.data.total || 0;
        })
        .catch(() => {
          this.filterCertQuery = false;
          this.manuCertList = [];
          this.manuCertTotal = 0;
        });
    },

    deleteCertDialog(_this,row) {
      _this.$confirm("确认删除吗?", "提示", {
          type: "warning",
        })
        .then(() => {
      deleteCert(row)
        .then((response) => {
          if(response.code == 20000){
            _this.getCertList()
          }else{
            _this.$message.error(response.message);
          }
        })
        .catch(() => {
          _this.$message.error(response.message);
        });
          });
    },
    executeFuc(row,type,clickFuc,value){
      return executeFuc(this,row,type,clickFuc,value);
    },
    executeEval(row,expression,defaultRet){
      if(expression){
        return eval(expression);
      }
      return defaultRet;
    }
  },
  components: {indexDialog,manuCertDialog},
  created() {
     getHead("manu-1","1").then((re) => {
       // 处理返回的数据
       this.tableObj = re.data;
       this.tableHeader = re.data.tableList;
       this.queryList = re.data.queryList;
       this.fromList = re.data.fromList;
       this.getList()
     });


    getHead("manu-2","1").then((re) => {
      // 处理返回的数据
      this.tableObj2 = re.data;
      this.tableHeader2 = re.data.tableList;
      this.queryList2 = re.data.queryList;
      this.fromList2 = re.data.fromList;
    });
  },
}
</script>

<style scoped>

</style>
