<template>
  <div class="app-container">
    <card-table :modalData="parabarList"  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:parabar:add']"
            >{{ $t('common.add') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['business:parabar:export']"
            >{{ $t('common.export') }}</el-button>
          </el-col>
          <el-col :span="1.5">
<!--            <ImportModal title="导入" icon="el-icon-download" fileName="参数信息导入模板"-->
<!--                         :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="参数包名" align="center" prop="parabarName" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input">
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.parabarName }}</span>
          </template>
        </Column>

        <Column label="参数包名(英)" align="center" prop="parabarNameUS" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input">
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.parabarNameUS }}</span>
          </template>
        </Column>

        <Column label="参数包名(俄)" align="center" prop="parabarNameRU" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input">
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.parabarNameRU }}</span>
          </template>
        </Column>

        <Column label="参数包名(西)" align="center" prop="parabarNameES" :min-width="150" :searchParams="queryParams" :showSearch="true" searchType="input">
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.parabarNameES }}</span>
          </template>
        </Column>

        <Column label="关联梯型" align="center" prop="relatedModel" :min-width="200"
                :selectMore="true"  :searchParams="queryParams" :searchDict="relatedModelList" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ row.relatedModel }}</span>
          </template>
        </Column>

        <Column  label="是否装潢包" align="center" prop="decorateFlag" :min-width="100" :searchDict="dict.type.decorate_flag"
                 :searchParams="queryParams" :showSearch="true" searchType="select">
          <template #default="{ row }">
            <span>{{ formatDict(row.decorateFlag,'decorate_flag') }}</span>
          </template>
        </Column>


        <Column label="状态" align="center" prop="status" :min-width="100"
                :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('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:parabar:edit']">{{ $t('common.edit') }}</el-button>
            <el-button size="mini" type="text"
                       icon="el-icon-delete" @click="handleDelete(row)"
                       v-hasPermi="['business:parabar:remove']">{{ $t('common.delete') }}</el-button>
          </template>
        </Column>
      </template>
    </card-table>
  </div>
</template>


<script>
import { listParabar, getParabar, delParabar, addParabar, updateParabar, getRelatedModelList, changeParaStatus} from "@/api/business/crm/parabar/parabar.js";
import moment from "moment";

export default {
  name: "Parabar",
  dicts: ['decorate_flag','status_switch'],

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数包表格数据
      parabarList: [],
      // 关联梯型
      relatedModelList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parabarName: null,
        parabarNameUS: null,
        parabarNameRU: null,
        parabarNameES: null,
        decorateFlag: null,
        relatedModel:[],
        status: null,
      },
      // 表单参数
      form: {
        parabarName: null,
        parabarNameUS: null,
        parabarNameRU: null,
        parabarNameES: null,
        decorateFlag: null,
        relatedModels:[{key:1,label:'xuanz1',value:1},{key:2,label:'xuanz3',value:2}],
        selectedModelIds:[1],
        relatedParas:[],
        selectedParaIds:[],
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getRelatedModelList();
    this.getList();
  },
  activated() {
    this.getRelatedModelList();
    this.getList();
  },
  methods: {

    /** 新增按钮操作 */
    handleAdd() {
      this.$tab.openPage("参数包配置新增", '/crmManagement/parabar-view/parabar/0', { type: 'add' });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$tab.openPage("参数包配置编辑", '/crmManagement/parabar-view/parabar/' + row.id, { type: 'edit' });
    },
    /** 行link操作 */
    handleView(row) {
      this.$tab.openPage("参数包配置详情", '/crmManagement/parabar-view/parabar/' + row.id,{ type: 'view' });
    },
    /**  获取关联梯型list */
    getRelatedModelList() {
      this.queryParams.language = this.$i18n.locale;
      let params;
      this.queryParams.language = this.$i18n.locale;
      params = {
        language:this.queryParams.language,
      }
      getRelatedModelList(params).then(response => {
          this.relatedModelList = [];
          response.forEach(item =>{
            this.relatedModelList.push(
              {
                value:item.parabarId,
                label:item.relatedModel,
                areaId:item.areaId,
                elevatorType:item.elevatorType,
                elevatorModel:item.elevatorModel
              }
            )
          });
      });
    },

    /** 查询参数包列表 */
    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,

        parabarName: this.queryParams.parabarName,
        parabarNameUS: this.queryParams.parabarNameUS,
        parabarNameRU: this.queryParams.parabarNameRU,
        parabarNameES: this.queryParams.parabarNameES,
        decorateFlag: this.queryParams.decorateFlag,
        relatedModelIdArrary: this.queryParams.relatedModel,
        status: this.queryParams.status,
      }
      listParabar(params).then(response => {
        this.parabarList = 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,
        elevatorModelId: null,
        parabarName: null,
        decorateFlag: null,
        status: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.parabarName = null;
      this.queryParams.parabarNameUS = null;
      this.queryParams.parabarNameRU = null;
      this.queryParams.parabarNameES = null;
      this.queryParams.decorateFlag = "";
      this.queryParams.relatedModel = [];
      this.queryParams.status = "";
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateParabar(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addParabar(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除参数包编号为"' + ids + '"的数据项？').then(function() {
        return delParabar(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.language = this.$i18n.locale;
      this.download('business/parabar/export', {
        ...this.queryParams
      }, `参数包_${moment().format('YYYYMMDD')}.xlsx`)
    },
    /** 参数包状态修改 */
    handleStatusChange(row) {
      let text = row.status === "0" ? '启用成功' : '停用成功';
      let conformMsg =  row.status === "0" ? '是否确认启用该参数包？' : '是否确认停用该参数包？';
      this.$modal.confirm(conformMsg + ' 参数包名 = ' + row.parabarName).then(function () {
        return changeParaStatus(row.id, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text);
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    // 字典值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;
    },
  }
};
</script>
