<template>
  <div class="account-container">
    <div class="account-title mb20">{{ $t('quotation.view') }}
      <el-button @click="cancel" icon="el-icon-remove-outline" class="button-group-button">{{ $t('common.cancel') }}</el-button>
    </div>
    <div class="card card-base" :class="{ 'card-full': true }">
      <el-tabs type="border-card" class="tab-around">
        <el-tab-pane style="border-radius: 6px">
            <span slot="label">
          <div class="card-title">{{ $t('quotation.detailInfo') }}</div>
            </span>
          <div class="flex-center-left mb16">
            <img class="item-size" src="@/assets/images/account-item.png" alt="">
            <div class="card-title">{{ $t('quotation.baseInfo') }}</div>
          </div>
          <el-form class="account-form" ref="form" :model="form" label-position="top">
            <el-row :gutter="20">
              <el-col :span="8" class="col-padding-right">
                <!--报价编号 -->
                <el-form-item :label="$t('quotation.quotationNo')" prop="quotationNo">
                  <el-input :disabled="disableFlag" v-model="form.quotationNo"
                            :placeholder="$t('common.pleaseInput') + $t('quotation.quotationNo')" style="width: 16vw;"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!--版本 -->
                <el-form-item :label="$t('quotation.version')" prop="owner">
                  <el-input :disabled="disableFlag" v-model="form.version"
                            :placeholder="$t('common.pleaseInput') + $t('quotation.version')" style="width: 16vw;"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="col-padding-right">
                <!--项目类型 -->
                <el-form-item :label="$t('project.type')" prop="owner">
                  <el-select :disabled="disableFlag" v-model="form.projectType" clearable
                             :placeholder="$t('common.pleaseSelect') + $t('project.type')" style="width: 16vw;">
                    <el-option v-for="dict in dict.type.project_type" :key="Number(dict.value)"
                               :label="dict.label" :value="Number(dict.value)"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16" class="col-padding-right">
                <!-- 关联项目 -->
                <el-form-item :label="$t('follow.relatedProject')" prop="accountGroup">
                  <el-select :disabled="disableFlag" v-model="form.projectId" clearable style="width: 48.4vw;"
                             :placeholder="$t('common.pleaseSelect') + $t('follow.relatedProject')">
                    <el-option v-for="dict in projectList" :key="Number(dict.value)"
                               :label="dict.label" :value="Number(dict.value)"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!--币种 -->
                <el-form-item :label="$t('project.currency')" prop="currencyId">
                  <el-select :disabled="disableFlag" v-model="form.currencyId" clearable style="width:16vw;"
                             :placeholder="$t('common.pleaseSelect') + $t('project.currency')">
                    <el-option v-for="dict in dict.type.currency_type" :key="Number(dict.value)"
                               :label="dict.label" :value="Number(dict.value)"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" class="col-padding-right">
                <!--代理商-->
                <el-form-item :label="$t('agent.agent')" prop="status">
                  <el-select :disabled="disableFlag" v-model="form.agentId" clearable style="width:16vw;"
                             :placeholder="$t('common.pleaseSelect') + $t('agent.agent')">
                    <el-option v-for="dict in agentList" :key="dict.value"
                               :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="col-padding-right">
                <!--国家 -->
                <el-form-item :label="$t('account.country')" prop="phone">
                  <el-select :disabled="disableFlag" v-model="form.countryId" clearable style="width:16vw;"
                             :placeholder="$t('common.pleaseSelect') + $t('account.country')">
                    <el-option v-for="dict in countryList" :key="Number(dict.value)"
                               :label="dict.label" :value="Number(dict.value)"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!--城市 -->
                <el-form-item :label="$t('project.city')" prop="city">
                  <el-input :disabled="true" v-model="form.city" maxlength="100" clearable style="width:16vw;"
                            :placeholder="$t('common.pleaseInput') + $t('project.city')"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 电梯一览 -->
          <div :class="{ 'contact-box': true }">
            <div class="flex-center-left">
              <img class="item-size" src="@/assets/images/account-item.png" alt="">
              <div class="card-title">{{ $t('quotation.elevatorView') }}</div>
            </div>
            <el-table :data="elevatorList" max-height="235px" v-loading="tableLoading">
              <el-table-column label="No." type="index" width="50"></el-table-column>
              <el-table-column prop="elevatorModel" :label="$t('elevatorModel.elevatorModel')" min-width="100px"/>
              <el-table-column prop="elevatorNumber" :label="$t('quotation.count')" min-width="60px"/>
              <el-table-column prop="elevatorCode" :label="$t('quotation.elevatorNo')" min-width="60px"/>
              <el-table-column prop="specification" :label="$t('quotation.specification')" min-width="200px"/>
              <el-table-column prop="createTime" :label="$t('common.createTime')" min-width="150px"/>
              <el-table-column :label="$t('common.operate')" min-width="80px">
                <template slot-scope="scope">
                  <el-button v-hasPermi="['user:agent:edit']" size="mini"
                             type="text" @click="handleView(scope.row)">{{ $t('quotation.elevatorDetail') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0"
                        :total="total"
                        :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList"/>
          </div>
          <el-form class="account-form" ref="form" :model="form" label-position="top" style="margin-top: 30px">
            <el-row>
              <el-col :span="8" class="col-padding-right">
                <!--价格合计 -->
                <el-form-item :label="$t('quotation.priceTotal')" prop="priceTotal">
                  <el-input :disabled="disableFlag" v-model="form.priceTotal" clearable
                            :placeholder="$t('common.pleaseInput') + $t('quotation.priceTotal')" style="width: 16vw;"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="salesFlag">
                <!--基准价格合计 -->
                <el-form-item :label="$t('quotation.benchmarkPriceTotal')" prop="benchmarkPriceTotal">
                  <el-input :disabled="disableFlag" v-model="form.benchmarkPriceTotal" clearable
                            :placeholder="$t('common.pleaseInput') + $t('quotation.benchmarkPriceTotal')" style="width: 16vw;"/>

                </el-form-item>
              </el-col>
              <el-col :span="8" class="col-padding-right" v-if="salesFlag">
                <!--选配加价合计 -->
                <el-form-item :label="$t('quotation.optionalPriceTotal')" prop="optionalPriceTotal">
                  <el-input :disabled="disableFlag" v-model="form.optionalPriceTotal" clearable
                            :placeholder="$t('common.pleaseInput') + $t('quotation.optionalPriceTotal')" style="width: 16vw;"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="salesFlag">
          <!-- 评审信息-->
          <span slot="label">
               <div class="card-title">{{ $t('quotation.reviewInfo') }}</div>
            </span>
          <el-row v-for="item in reviewInfoList">
            <el-col :span="8">
              <div class="card-title">{{ item.title }}</div>
              <div class="ml20">{{ $t('quotation.workPeriod') }}：{{ item.period }}</div>
              <div class="ml20 mb10">{{ $t('common.remark') }}：{{ item.remark }}</div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getQuotationDetail} from "@/api/business/quotation/quotation";
import {listAllAgent} from "@/api/user/agent";
import {listSpecification} from "@/api/business/quotation/specification";
import store from '@/store'

export default {
  name: "QuotationDetail",
  dicts: ['project_type', 'currency_type'],
  data() {
    return {
      type: 'add',
      form: {},
      elevatorList: [],
      reviewInfoList: [
        {title: '技术评审', period: '45天', remark: '这是一条技术备注'},
        {title: '采购评审', period: '45天', remark: '这是一条技术备注'},
        {title: '财务评审', period: '45天', remark: '这是一条技术备注'},
      ],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      countryList: [],
      agentList: [],
      projectList: [],
      disableFlag: true,
      // 是否销售
      salesFlag: true,
      quotationId: null,
      tableLoading: false,
    };
  },
  created() {
    this.quotationId = this.$route.query && this.$route.query.quotationId;
    this.initAgent();
    this.initForm();
    this.getList()
  },
  activated() {
  },
  methods: {
    getList() {
      this.tableLoading = true
      let form = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        quotationId: this.quotationId
      }
      listSpecification(form).then(response => {
        this.elevatorList = response.rows
        this.total = response.total
      }).finally(() => {
        this.tableLoading = false
      })
    },
    initForm() {
      if (this.quotationId) {
        getQuotationDetail(this.quotationId).then(response => {
          if (response.data) {
            let data = response.data
            this.form.quotationNo = data.quotationNo
            this.form.version = data.version
            this.form.projectType = Number(data.type)
            this.form.currencyId = data.currencyId
            this.form.agentId = Number(data.agentId)
            this.form.countryId = data.countryId
            this.form.city = data.city
            this.form.projectId = data.projectId
            this.form.priceTotal = data.priceTotal
            this.form.benchmarkPriceTotal = data.benchmarkPriceTotal
            this.form.optionalPriceTotal = data.optionalPriceTotal
            this.projectList.push({
              label: data.projectNo + ':' + data.projectName + '、' + data.countryName + '、' + data.city + '、' + data.developer,
              value: data.projectId,
            })

            this.countryList.push({
              label: data.countryName,
              value: data.countryId
            })
          }
        })
      }
    },
    handleView(row) {
      store.commit('PUT_ELEVATOR', row)
      this.$tab.openPage(this.$t('elevator.view'), '/quotation/elevator', {type: 'detail', 'quotationId': this.quotationId, 'elevatorId': row.id});
    },
    /** 返回上个页面 */
    cancel() {
      this.$tab.closeOpenPage({path: "/quotation/quotation"});
    },
    async initAgent() {
      // 判断是否为代理商
      let userInfo = this.$store.state.user.userInfo;
      this.agentFlag = userInfo.deptId !== 0
      console.log('agentId', userInfo.deptId)
      let params = {}
      if (this.agentFlag === true) {
        params = {
          'agentId': userInfo.deptId
        }
        this.form.agentId = userInfo.deptId
      } else {
        params = {
          'parentSalerId': userInfo.userId
        }
      }
      const response = await listAllAgent(params);
      if (response.rows) {
        response.rows.forEach(item => {
          this.agentList.push(
            {
              'label': item.agentName,
              'value': item.agentId,
              'countryId': item.countryId,
            }
          )

        })
        if (this.agentFlag === true) {
          this.agentChange(userInfo.deptId)
        }
      }
    },
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .account-form .el-form-item--medium .el-form-item__label {
  line-height: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 20px;
}

::v-deep .upload-file-list .ele-upload-list__item-content {
  width: 500px;
}

::v-deep .upload {
  .upload-file-uploader {
    height: 0;
  }
}

::v-deep .card-title {
  font-family: Arial, Arial;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 38px;
}

.button-group-button {
  float: right;
}

// ::v-deep .el-icon-document {
//     width: 350px;
//     overflow: hidden;
//     white-space: nowrap;
//     text-overflow: ellipsis;
// }

.account-container {
  padding: 16px 1vw;

  .account-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }

  .mt16 {
    margin-top: 16px;
  }

  .mb16 {
    margin-bottom: 16px;
  }

  .mb16 {
    margin-bottom: 20px;
  }

  .ml20 {
    margin-left: 1vw;
  }

  .contact-box {
    margin-bottom: 50px;
  }

  .col-padding-left {
    padding-left: 10px;
  }

  .col-padding-right {
    padding-right: 10px;
  }

  .max-width {
    max-width: 20vw;
  }

  .flex-center-left {
    display: flex;
    align-items: center;
    justify-content: left;
  }

  .account-select {
    margin: 16px 0;
  }

  .select-box {
    display: flex;
  }

  .select-item {
    cursor: pointer;
    margin-right: 10px;
    padding: 10px 20px;
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    color: #3C485B;
    line-height: 21px;
    border: 1px solid transparent;
  }

  .selected {
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px #CED6DD;
    color: #D31017;
    border: 1px solid #D31017;
  }

  .content {
    width: 100%;
    display: flex;

    .card {
      background: #FFFFFF;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;
      padding: 20px;
    }

    .card-title {
      font-family: Arial, Arial;
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
    }

    .card-base {
      width: 53.5vw;
      position: relative;

    }

    .card-height {
      height: 1332px;
    }

    .card-mini {
      width: 43vw;
      height: 450px;
    }

    .card-full {
      width: 97.6vw;
    }
  }

  .item-size {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}

.tab-around {
  border-radius: 6px;

  ::v-deep #tab-0 {
    border-top-left-radius: 6px;
  }

  ::v-deep .el-tabs__nav-scroll {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
  }

}

::v-deep .el-tabs__header{
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

</style>
