<template>
  <div class="app-container">
    <el-row class="card-Table">
      <el-col :span="24" style="padding-left: 0px;margin-bottom: 10px">
        <Form v-model="optionTableQueryParams" label-width="220px">
          <Input prop="paraCode" :label="`${$t('选配关联参数')}(${paraLabelFormatter(paraData.paraCode)})`" />
          <Select :label="$t('数量类型')" prop="quantityType" :data="dict.type.value_type" />
          <Select :label="$t('价格类型')" prop="priceType" :data="dict.type.value_type" />
          <Select :label="$t('状态')" prop="status" :data="dict.type.status_switch" />
          <el-button style="margin-left: 20px;" @click="getOptionParaPriceList" type="primary">{{ }}查询</el-button>
        </Form>
      </el-col>

      <el-col :span="12" style="padding-left: 0px;margin-bottom: 10px">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleOpen">{{ }}新增</el-button>
      </el-col>

      <el-table ref="table" :data="optionTableList" v-loading="optionTableLoading" row-key="id" class="page-table"
        :row-style="{ 'height': '8px' }" max-height="520px" :border="true"
        :header-cell-style="{ 'background-color': '#F4F6F8', 'border-right': '1px solid #dfdcdc', 'color': '#92A2B5' }">
        <el-table-column type="index" width="55" align="center" label="No." fixed="left" />
        <el-table-column prop="paraCode" :label="`${$t('选配关联参数')}(${paraLabelFormatter(paraData.paraCode)})`"
          width="200px" fixed="left" show-overflow-tooltip />
        <el-table-column v-for="index in 10"
          :label="`${$t('其他关联参数' + index)}(${paraLabelFormatter(paraData['relatedParaCode' + index])})`"
          :prop="'relatedParaValue' + index" width="200px" show-overflow-tooltip />
        <DictColumn prop="quantityType" label="数量类型" :width="120" dictType="value_type" align="center" />
        <el-table-column prop="quantity" label="数量" width="200px" show-overflow-tooltip align="center">
          <template #default="{ row }">
            <span v-if="row.quantityType === '1'">{{ row.quantity }}</span>
            <span v-else>{{ row.quantityFormulaTxt }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quantityUnit" label="单位" width="120px" show-overflow-tooltip align="center" />
        <DictColumn prop="priceType" label="价格类型" :width="120" dictType="value_type" align="center" />
        <el-table-column prop="price" label="价格" width="200px" show-overflow-tooltip align="right">
          <template #default="{ row }">
            <span v-if="row.priceType === '1'">{{ row.price }}</span>
            <span v-else>{{ row.priceFormulaTxt }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />

        <el-table-column prop="status" :label="$t('状态')" width="100px" align="center" fixed="right">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-value="0" inactive-value="1" @change="handleToggleStatus(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" width="200px" fixed="right" align="center">
          <template #default="{ row }">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-document-copy" @click="handleCopy(row)">复制</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="optionTableQueryParams.total > 0"
        :total="optionTableQueryParams.total ? optionTableQueryParams.total : 0"
        :page.sync="optionTableQueryParams.pageNum" :limit.sync="optionTableQueryParams.pageSize"
        @pagination="getOptionParaPriceList" />
    </el-row>


    <DialogPage ref="optionDialog" :title="$t('选配项目')" width="800px" @success="getOptionParaPriceList" :modal="false">
      <template #default="{ form }">
        <Input :label="`${$t('选配关联参数')}(${paraLabelFormatter(paraData.paraCode)})`" prop="paraCode" required
          :maxlength="500" />
        <Input v-for="index in 10" :disabled="paraLabelFormatter(paraData['relatedParaCode' + index]) === '无'"
          :required="paraLabelFormatter(paraData['relatedParaCode' + index]) !== '无'"
          :label="`${$t('其他关联参数' + index)}(${paraLabelFormatter(paraData['relatedParaCode' + index])})`"
          :prop="'relatedParaValue' + index" :maxlength="100" />

        <br />
        <Select :label="$t('数量类型')" prop="quantityType" :data="dict.type.value_type" required
          @change="form.quantity = undefined; form.quantityFormulaTxt = undefined" />
        <InputNumber v-if="form.quantityType === '1'" :label="$t('数量')" prop="quantity" required :min="-999999" />
        <Input v-else :label="$t('数量')" prop="quantityFormulaTxt" :elevatorModelIdList="[paraData.elevatorModelId]"
          :optionParaSelection="optionParaSelection" showFormula required :maxlength="5000" />
        <Input :label="$t('单位')" prop="quantityUnit" required />

        <br />
        <Select :label="$t('价格类型')" prop="priceType" :data="dict.type.value_type" required
          @change="form.price = undefined; form.priceFormulaTxt = undefined" />
        <InputNumber v-if="form.priceType === '1'" :label="$t('价格')" prop="price" required :min="-999999"
          :precision="2" />
        <Input v-else :label="$t('价格')" prop="priceFormulaTxt" :elevatorModelIdList="[paraData.elevatorModelId]"
          :optionParaSelection="optionParaSelection" showFormula required :maxlength="5000" />
        <Input type="textarea" :label="$t('备注')" prop="remark" width="740px" :maxlength="500" />
      </template>
    </DialogPage>

  </div>
</template>


<script>

import { getOptionPara, getOptionParaSelection } from "@/api/business/crm/areaOptionPara.js";
import { listOptionParaPrice, addOptionParaPrice, delOptionParaPrice, toggleStatusOptionParaPrice, getOptionParaPrice, updateOptionParaPrice } from "@/api/business/crm/areaOptionParaPrice.js";
import { listPara } from "@/api/business/crm/areaPara.js";

export default {
  name: "PriceFormDetail",
  dicts: ['status_switch', 'value_type'],
  data() {
    return {
      paraData: {},
      optionTableQueryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        paraCode: '',
        status: null,
      },
      localLabel: "",
      localParaLabel: '',
      localSelectLabel: "",
      optionTableLoading: false,
      optionTableList: [],
      paraLibraryList: [],
      paraLibraryListOpt: [],
      optionList: [],
      otherList: [],
      paraMap: {},
      optionParaSelection: [],
    };
  },
  created() {
    this.initData()
  },
  activated() {
    this.initData()
  },
  methods: {
    getOptionParaPriceList() {
      this.optionTableLoading = true;
      this.optionTableQueryParams.markupId = this.$route.query.id
      listOptionParaPrice(this.optionTableQueryParams).then(response => {
        this.optionTableList = response.rows;
        this.optionTableQueryParams.total = response.total;
      }).finally(() => this.optionTableLoading = false);
    },
    handleOpen() {
      const { id: markupId, markupName, elevatorModelId } = this.paraData
      this.$refs.optionDialog.open(addOptionParaPrice, { quantityType: '1', priceType: '1', markupId, markupName, elevatorModelId })
    },
    initData() {
      getOptionPara(this.$route.query.id).then(response => {
        this.paraData = response.data || {};
      })
      getOptionParaSelection(this.$route.query.id).then(response => {
        this.optionParaSelection = response.data || [];
      })
      this.setLabel()
      this.getParamLibraryList()
      this.getOptionParaPriceList()
    },
    paraLabelFormatter(value) {
      return this.paraMap[value] || value || '无'
    },
    //设置本地语音label
    setLabel() {
      let currentLocale = window.VueI18n.locale;
      switch (currentLocale) {
        case "chinese": this.localLabel = "areaName"
          this.localParaLabel = "paraName"
          this.localSelectLabel = "label"
          break
        case "english": this.localLabel = "areaNameUS"
          this.localParaLabel = "paraNameUS"
          this.localSelectLabel = "labelUS"
          break
        case "russia": this.localLabel = "areaNameRU"
          this.localParaLabel = "paraNameRU"
          this.localSelectLabel = "labelRU"
          break
        case "spanish": this.localLabel = "areaNameES"
          this.localParaLabel = "paraNameES"
          this.localSelectLabel = "labelES"
          break
      }
    },
    //获取全部的参数列表
    getParamLibraryList() {
      let params;
      params = {
        pageNum: 0,
        pageSize: 0,
        status: 0,
        elevatorModelId: this.elevatorModelId,
      };
      listPara(params).then(response => {
        this.paraLibraryList = response.rows.map(item => ({ key: item.paraCode, label: item.paraName }))
        this.optionList = this.paraLibraryList
        this.otherList = this.paraLibraryList
        const paraMap = {}
        this.paraLibraryList.forEach(item => {
          paraMap[item.key] = item.label
        })
        this.paraMap = paraMap

      });
    },
    // 排序
    handleToggleStatus(row) {
      toggleStatusOptionParaPrice(row).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getOptionParaPriceList();
      })
    },
    handleEdit(row) {
      this.$refs.optionDialog.open(updateOptionParaPrice, getOptionParaPrice.bind(this, row.id))
    },
    handleCopy(row) {
      this.$refs.optionDialog.open(addOptionParaPrice, getOptionParaPrice.bind(this, row.id), "复制")
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名称为"' + row.paraCode + '"的数据项？').then(() => {
        delOptionParaPrice(row.id).then(res => {
          if (res.code === 200) {
            this.getOptionParaPriceList();
            this.$modal.msgSuccess("删除成功");
          }
        });
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.paraSelect {
  ::v-deep .el-transfer-panel {
    width: 250px;
    height: 450px;
  }

  ::v-deep .el-transfer-panel__body {
    height: 390px;

    .el-transfer-panel__list {
      height: 390px;
    }
  }

}

.search-form {
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px #CED6DD;
  padding: 15px 0 0 0;
}

.card-Table {
  padding: 24px;
  margin-top: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 #CED6DD;
  border-radius: 6px;

  ::v-deep .el-table {
    .caret-wrapper {
      display: none !important;
    }

    .label-header .caret-wrapper {
      display: inline-block !important;
    }
  }

}
</style>
