<template>
  <div class="app-container">
    <card-table :modalData="libraryList"  labelWidth="120px" :searchParams="queryParams" @pagination="getList" @selection-change="handleSelectionChange" :loading="loading"
                :tableSearch="true" @columnSearch="handleQuery" @resetList="resetQuery">
      <template #operations="{ selections }">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['business:library:add']"
            >{{ $t('common.add') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              icon="el-icon-download"
              size="mini"
              plain
              @click="handleExport"
              v-hasPermi="['business:library:export']"
            >{{ $t('common.export') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <ImportModal :title="$t('common.import')" icon="el-icon-download" fileName="参数信息导入模板" :tableType="2"
                         :close="getList" />
          </el-col>
        </el-row>
      </template>

      <template #default="{ list }">
        <el-table-column label="No." align="center" :min-width="50"  fixed="left" >
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <Column :label="$t('paraLibrary.paraCode')" align="center" prop="paraCode" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input" fixed="left">
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.paraCode }}</span>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.paraName')" align="center" prop="paraName" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input"/>
        <Column :label="$t('paraLibrary.paraNameUS')" align="center" prop="paraNameUS" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input"/>
        <Column :label="$t('paraLibrary.paraNameRU')" align="center" prop="paraNameRU" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input"/>
        <Column :label="$t('paraLibrary.paraNameES')" align="center" prop="paraNameES" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input"/>
        <Column  :label="$t('paraLibrary.paraCategory')" align="center" prop="paraCategory" :min-width="200" :searchDict="dict.type.para_category"
                 :selectMore="true" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.paraCategory,'para_category') }}</span>
          </template>
        </Column>
        <Column  :label="$t('paraLibrary.inputType')" align="center" prop="inputType" :min-width="200" :searchDict="dict.type.input_type"
                 :selectMore="true" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.inputType,'input_type') }}</span>
          </template>
        </Column>
        <Column  :label="$t('paraLibrary.elevatorType')" align="center" prop="elevatorType" :min-width="200" :searchDict="dict.type.elevator_type"
                 :selectMore="true" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.elevatorType,'elevator_type') }}</span>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.status')" align="center" prop="status" :min-width="150"
                :searchDict="dict.type.status_switch" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(row)"
            ></el-switch>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.isQuotation')" align="center" prop="isQuotation" :min-width="150"
                :searchDict="dict.type.crm_yes_no" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.isQuotation,'crm_yes_no') }}</span>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.isCivil')" align="center" prop="isCivil" :min-width="150"
                :searchDict="dict.type.crm_yes_no" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.isCivil,'crm_yes_no') }}</span>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.isCalc')" align="center" prop="isCalc" :min-width="150"
                :searchDict="dict.type.crm_yes_no" :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.isCalc,'crm_yes_no') }}</span>
          </template>
        </Column>
        <Column :label="$t('paraLibrary.sortNumber')" align="center" prop="sortNumber" :min-width="100" />
        <Column :label="$t('common.operate')" :min-width="250" fixed="right" :showSearch="true"
                searchType="operate">
          <template #default="{ row }">
            <el-button size="mini" type="text"
                       icon="el-icon-edit" @click="handleUpdate(row)"
                       v-hasPermi="['business:library:edit']">{{ $t('common.edit') }}</el-button>
            <el-button size="mini" type="text"
                       icon="el-icon-delete" @click="handleDelete(row)"
                       v-hasPermi="['business:library:remove']">{{ $t('common.delete') }}</el-button>
          </template>
        </Column>
      </template>
    </card-table>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" top="5%" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="40%">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('paraLibrary.paraCode')" prop="paraCode">
              <el-input v-model="form.paraCode" :placeholder="$t('common.pleaseInput')+$t('paraLibrary.paraCode')" :maxlength="60"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
<!--            <el-form-item :label="$t('paraLibrary.sortNumber')" prop="sortNumber">-->
<!--              <el-input-number style="width: 100%" v-model="form.sortNumber" :min="1" :max="10000" :placeholder="$t('common.pleaseInput')" />-->
<!--            </el-form-item>-->
            <InputNumber :label="$t('paraLibrary.sortNumber')" :max="10000" :min="0" :precision=0 prop="sortNumber"
                         :placeholder="$t('common.pleaseInput')+$t('paraLibrary.sortNumber')" width="100%"/>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('paraLibrary.paraName')" prop="paraName">
              <el-input v-model="form.paraName" :placeholder="$t('common.pleaseInput')+$t('paraLibrary.paraName')" :maxlength="180"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('paraLibrary.paraNameUS')" prop="paraNameUS">
              <el-input v-model="form.paraNameUS" :placeholder="$t('common.pleaseInput')+$t('paraLibrary.paraNameUS')" :maxlength="180" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('paraLibrary.paraNameRU')" prop="paraNameRU">
              <el-input v-model="form.paraNameRU" :placeholder="$t('common.pleaseInput')+$t('paraLibrary.paraNameRU')" :maxlength="180" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('paraLibrary.paraNameES')" prop="paraNameES">
              <el-input v-model="form.paraNameES" :placeholder="$t('common.pleaseInput')+$t('paraLibrary.paraNameES')" :maxlength="180" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.paraCategory')" prop="paraCategory" :data="dict.type.para_category" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.paraCategory')"/>
          </el-col>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.inputType')" prop="inputType" :data="dict.type.input_type" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.inputType')"/>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.elevatorType')" prop="elevatorType" :data="dict.type.elevator_type" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.elevatorType')"/>
          </el-col>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.status')" prop="status" :data="dict.type.status_switch" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.status')"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.isQuotation')" prop="isQuotation" :data="dict.type.crm_yes_no" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.isQuotation')"/>
          </el-col>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.isCivil')" prop="isCivil" :data="dict.type.crm_yes_no" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.isCivil')"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <Select :label="$t('paraLibrary.isCalc')" prop="isCalc" :data="dict.type.crm_yes_no" required
                    :placeholder="$t('common.pleaseSelect')+$t('paraLibrary.isCalc')"/>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-circle-check" @click="submitForm">{{ $t('common.confirm') }}</el-button>
        <el-button icon="el-icon-remove-outline" @click="cancel">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
import { listLibrary, getLibrary, delLibrary, addLibrary, updateLibrary, changeParaStatus,delLibraryCheck } from "@/api/business/crm/paralibrary/library.js";
import ImportModal from "../../../components/ImportModal/index";
import InputNumber from '../../../components/element/form/items/InputNumber'

import { downloadTemplate } from '@/api/excel'
export default {
  name: "ParaLibrary",
  components:{ InputNumber, ImportModal},
  dicts: ['input_type','para_category','elevator_type','status_switch','crm_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      libraryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        paraCode: null,
        paraName: null,
        paraNameUS: null,
        paraNameRU: null,
        paraNameES: null,
        paraCategory: null,
        inputType: null,
        sortNumber: null,
        elevatorType: null,
        isQuotation:null,
        isCivil:null,
        isCalc:null,
        status: null,
      },
      // 表单参数
      form: {
        paraCode: null,
        paraName: null,
        paraNameUS: null,
        paraNameRU: null,
        paraNameES: null,
        paraCategory: null,
        inputType: null,
        sortNumber: 1,
        elevatorType: null,
        isQuotation:null,
        isCivil:null,
        isCalc:null,
        status: null,
      },
      // 表单校验
      rules:{
        paraCode:[
          {required:true, message: this.$t('common.pleaseInput')+this.$t('paraLibrary.paraCode'), trigger:'blur'}
        ],
        paraName:[
          {required:true, message: this.$t('common.pleaseInput')+this.$t('paraLibrary.paraName'), trigger:'blur'}
        ],
        paraNameUS:[
          {required:true, message: this.$t('common.pleaseInput')+this.$t('paraLibrary.paraNameUS'), trigger:'blur'}
        ],
        paraNameRU:[
          {required:true, message: this.$t('common.pleaseInput')+this.$t('paraLibrary.paraNameRU'), trigger:'blur'}
        ],
        paraNameES:[
          {required:true, message: this.$t('common.pleaseInput')+this.$t('paraLibrary.paraNameES'), trigger:'blur'}
        ],
        paraCategory:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
        inputType:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
        sortNumber:[
          {required:true, message: this.$t('common.pleaseInput'), trigger:'blur'}
        ],
        isQuotation:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
        isCivil:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
        isCalc:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
        status:[
          {required:true, message: this.$t('common.pleaseSelect'), trigger:'blur'}
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      let params;
      this.loading = true;
      this.queryParams.language = this.$i18n.locale;
      params = {
        pageNum:this.queryParams.pageNum,
        pageSize:this.queryParams.pageSize,
        language:this.queryParams.language,

        paraCode: this.queryParams.paraCode,
        paraName: this.queryParams.paraName,
        paraNameUS: this.queryParams.paraNameUS,
        paraNameRU: this.queryParams.paraNameRU,
        paraNameES: this.queryParams.paraNameES,
        sortNumber: this.queryParams.sortNumber,
        paraCategoryArray: this.queryParams.paraCategory,
        inputTypeArray: this.queryParams.inputType,
        elevatorTypeArray: this.queryParams.elevatorType,
        status: this.queryParams.status,
        isQuotation:this.queryParams.isQuotation,
        isCivil:this.queryParams.isCivil,
        isCalc:this.queryParams.isCalc,
      }
      listLibrary(params).then(response => {
        this.libraryList = response.rows;
        this.total = response.total;
        this.queryParams.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        paraCode: null,
        paraName: null,
        paraNameUS: null,
        paraNameRU: null,
        paraNameES: null,
        paraCategory: null,
        inputType: null,
        elevatorType: null,
        sortNumber: 1,
        status: null,
        isQuotation:null,
        isCivil:null,
        isCalc:null,
      };
      //this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        pageNum: 1,
        pageSize: 10,
        paraCode: null,
        paraName: null,
        paraNameUS: null,
        paraNameRU: null,
        paraNameES: null,
        paraCategory: null,
        inputType: null,
        sortNumber: null,
        elevatorType: null,
        status: null,
        isQuotation:null,
        isCivil:null,
        isCalc:null,
      };
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      //设置部分默认值
      this.title = this.$t('paraLibrary.addParameter');
      this.form.paraCategory = '00'
      this.form.inputType='00'
      this.form.elevatorType='01'
      this.form.status = "0"
      this.form.isQuotation='0'
      this.form.isCivil='0'
      this.form.isCalc='1'
      //重置校验
      this.$refs.form.clearValidate();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      //重置校验
      const id = row.id || this.ids
      getLibrary(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = this.$t('paraLibrary.editParameter');
        if(this.$refs.form){
          this.$refs.form.clearValidate();
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateLibrary(this.form).then(response => {
              this.$modal.msgSuccess(this.$t('common.editSuccess'));
              this.open = false;
              this.getList();
            });
          } else {
            addLibrary(this.form).then(response => {
              this.$modal.msgSuccess(this.$t('common.addSuccess'));
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm(this.$t('common.isDelete')).then(function() {
        return delLibraryCheck([row]);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('common.deleteSuccess'));
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExportOld() {
      const fileName = '参数库_' + this.parseTime(new Date(), '{y}{m}{d}') + '.xlsx'
      this.queryParams.language = this.$i18n.locale;
      this.download('business/library/export', {
        ...this.queryParams
      }, fileName)
    },
    /** 导出按钮操作 */
    handleExport() {

      let para = {...this.queryParams}
      this.$delete(para,"elevatorType")
      this.$delete(para,"paraCategory")
      this.$delete(para,"inputType")
      this.loading = true
      const fileName = '参数库_' + this.parseTime(new Date(), '{y}{m}{d}') + '.xlsx'
      downloadTemplate({ tableType: 2, elevatorModelId: 1, withData: true, downloadFileName: fileName,params:para })
        .finally(() => this.loading = false)
    },

    /** 导入按钮操作 */
    handleImport() {  },
    /** 行link操作 */
    handleView(row) {
      let params = {
        'id': row.id,
        'paraCode': row.paraCode
      }
      this.$tab.openPage(this.$t('paraLibrary.paraSelectItems'), '/crmManagement/library-view/index/'+ row.id , params);
    },
    // 字典值format
    formatDict(value,dictType){
      let labelStr = '';
      for(let i =0;i< this.dict.type[dictType].length;i++){
        let item = this.dict.type[dictType][i]
        if(item.value == value){
          labelStr = item.label;
          break;
        }
      }
      return  labelStr;
    },
    // 参数状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? this.$t('common.enableSuccess') : this.$t('common.deactivatSuccess');
      let conformMsg =  row.status === "0" ? this.$t('common.enableConfirmMsg') : this.$t('common.deactivatConfirmMsg');
      this.$modal.confirm(conformMsg + this.$t('paraLibrary.paraCode') +'=' + row.paraCode).then(function () {
        return changeParaStatus(row.id, row.status,row.updateTime);
      }).then(() => {
        this.$modal.msgSuccess(text);
        this.getList()
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
  }
};
</script>
