<template>
  <div v-loading="fullLoading" class="content">
    <div class="top">
      <div class="engineering-title">
        <div>{{ $t('engineering.view') }}</div>
      </div>
      <div class="button-group">
        <el-button icon="el-icon-remove-outline" plain @click="cancel">
          {{ $t('common.back') }}
        </el-button>
      </div>
    </div>

    <div class="card">
      <el-form class="plot-form" ref="form" :model="form" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <Select disabled prop="projectId" :data="projectList" :label="$t('follow.relatedProject')"
                    :styleObj="{ width: '100%' }"></Select>
          </el-col>
          <el-col :span="6">
            <!--            语言-->
            <Select disabled required prop="language" :data="dict.type.language" :label="$t('common.language')" :clearable="false"
                    :styleObj="{ width: '100%' }"></Select>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="20">-->
        <!--          <el-col :span="8">-->
        <!--            <Select disabled prop="quotationId" :data="quotationList" :label="$t('engineering.quotation')"-->
        <!--                    :styleObj="{ width: '100%' }"></Select>-->
        <!--          </el-col>-->
        <!--          <el-col :span="4">-->
        <!--            <Select disabled prop="version" :data="versionList" :clearable="false"-->
        <!--                    :label="$t('quotation.version')" :styleObj="{ width: '100%' }"></Select>-->
        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-table class="elevator-table" :data="elevatorTableList" max-height="400px" border
                  :header-cell-style="{ background: '#F4F6F8', color: '#92A2B5' }">
          <el-table-column label="No." type="index" width="50" align="center"
                           min-width="200px"></el-table-column>
          <el-table-column prop="elevatorModel" :label="$t('elevatorModel.elevatorModel')"
                           min-width="200px"></el-table-column>
          <el-table-column prop="elevatorCode" :label="$t('quotation.elevatorNo')"
                           min-width="200px"></el-table-column>
          <!--          排列序号-->
          <el-table-column prop="sortNumber" :label="$t('elevator.sortNum')" min-width="200px"></el-table-column>
          <el-table-column prop="addType" :label="$t('engineering.addType')" min-width="200px" align="center">
            <template slot-scope="scope">
              <span>{{ formatDict(scope.row.addType, dict.type.plot_add_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="specification" :label="$t('engineering.specification')" min-width="600px"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" :label="$t('common.createTime')"
                           min-width="200px"></el-table-column>
          <el-table-column :label="$t('common.operate')" width="150px" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view"
                         @click="handleViewElevator(scope.row)">{{ $t('common.view') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <span v-if="elevatorTableList && elevatorTableList.length > 1">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20">
              <el-col :span="24">
                <Select disabled prop="templateId" :data="templateList"
                        :label="$t('engineering.templateSelect')" :styleObj="{ width: '100%' }"></Select>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
               <Select disabled prop="commonShaftMaterial" :data="dict.type.shaft_material"
                       :label="$t('engineering.commonShaftMaterial')" :styleObj="{ width: '100%' }"></Select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="18">
              <div class="template-pic">
                    <el-card :body-style="{ padding: '0px !important',width: '30.5vw',height:'30.5vw' }">
                      <el-image fit="fill" style="width: 30.5vw;height: 30.5vw;border-radius: 6px;margin: 0px" :src="baseApi + file" :preview-src-list="[baseApi + file]">
                        <div slot="error">
                          <div class="err-div" style="width: 30.5vw;height: 30.5vw">{{ $t('quotation.noImg') }}</div>
                        </div>
                        <div slot="placeholder">
                          <div class="err-div" style="width: 30.5vw;height: 30.5vw">{{ $t('quotation.noImg') }}</div>
                        </div>
                      </el-image>
                    </el-card>
               </div>
          </el-col>
         </el-row>
        </span>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getEngineering} from "@/api/business/civil/engineering";
import {listAllTemplates} from "@/api/business/civil/templates";
import {listAllProject} from "@/api/business/crm/project";
import {listByProjectId} from "@/api/business/quotation/quotation";
import {listByQuotationId} from "@/api/business/quotation/specification";
import store from '@/store/index'
import ImageUpload from "@/components/ImageUpload/index";

export default {
  name: "Plot-view",
  components: {ImageUpload},
  dicts: ['shaft_material', 'plot_add_type', 'language'],
  data() {
    return {
      // 下载文件url前缀
      baseApi: process.env.VUE_APP_BASE_API,
      id: null,
      language: this.$i18n.locale,
      fullLoading: false,
      form: {},
      projectList: [],
      quotationList: [],
      versionList: [],
      modelList: [],
      elevatorModelList: [],
      templateList: [],
      elevatorTableList: [],
      file: '',
    }
  },
  async created() {
    this.id = this.$route.query && this.$route.query.id;
    await this.getEngineering();
    this.getTemplateList();
  },
  methods: {
    async getEngineering() {
      this.fullLoading = true;
      await getEngineering(this.id).then(res => {
        this.form = res.data;
        this.elevatorTableList = this.form.elevatorList;
        let countryName = '';
        switch (this.language) {
          case 'chinese':
            countryName = this.form.countryName
            break;
          case 'english':
            countryName = this.form.countryNameUS
            break;
          case 'russia':
            countryName = this.form.countryNameRU
            break;
          case 'spanish':
            countryName = this.form.countryNameES
            break;
        }
        this.projectList = [{value: this.form.projectId, label: this.form.projectNo + ':  ' + this.form.projectName + ' - ' + countryName + ' - ' + this.form.city}]
        if (this.form.quotationId) {
          this.quotationList = [{value: this.form.quotationId, label: this.form.quotationNo + ':  ' + this.form.projectName}]
        }
        if (this.form.version) {
          this.versionList = [{value: this.form.version, label: this.form.version}]
        }
      })
      this.fullLoading = false;
    },
    formatDict(value, dictData) {
      return dictData.find(dict => dict.value == value)?.label;
    },
    getProjectList() {
      listAllProject().then(res => {
        this.projectList = res.rows.map(item => {
          return {
            value: item.projectId,
            label: item.projectNo + ':  ' + item.projectName + ' - ' + item.countryName + ' - ' + item.city
            // + ' - ' + item.developer
          }
        })
      })
    },
    getQuotationList() {
      listByProjectId(this.form.projectId).then(res => {
        this.quotationList = res.data.map(item => {
          return {
            value: item.id,
            label: item.quotationNo + ':  ' + item.projectName,
            version: item.version
          }
        })
      })
    },
    getModelList() {
      listByQuotationId(this.form.quotationId).then(res => {
        this.modelList = res.data;
        this.elevatorModelList = res.data.map(item => {
          return {
            value: item.elevatorModelId,
            label: item.elevatorModel
            // label: item.elevatorCode + ':  ' + item.elevatorModel
          }
        })
      })
    },
    templateChange(val) {
      this.file = this.templateList.find(item => item.value == val)?.file;
    },
    getTemplateList() {
      listAllTemplates().then(res => {
        this.templateList = res.rows.map(item => {
          return {
            value: item.id,
            label: item.templateName + ' (' + item.elevatorPosition + ')',
            file: item.file
          }
        })
        this.templateChange(this.form.templateId)
      })
    },
    handleViewElevator(row) {
      store.commit('PUT_ELEVATOR', row)
      let query = {type: 'detail', elevatorId: row.id, areaId: row.areaId, plotId: this.id}
      this.$tab.openPage(this.$t('elevator.view'), '/civil/elevator', query);
    },
    cancel() {
      this.$tab.closePage();
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .plot-form .el-form-item--medium .el-form-item__label {
  line-height: 16px;
}

::v-deep .no-plus .el-upload--picture-card {
  display: none;
}

.content {
  padding: 24px;
  position: relative;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .engineering-title {
      font-size: 18px;
      color: #000000;
      line-height: 21px;
      font-weight: bold;
    }

    .button-group {
      display: flex;
    }
  }

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

    .elevator-table {
      margin: 24px 0 40px 0;
    }
  }

  .template-pic {
    bottom: 48px;
    left: 30%;
    width: 30.5vw;
  }
}

.err-div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 文字水平居中 */
  height: 30.5vw; /* 设置容器高度 */
  width: 30.5vw; /* 设置容器宽度 */
  /*border: 1px solid #ccc; !* 边框 *!*/
  user-select: none;
  background-color: rgb(245, 247, 250);
}
</style>
