<template>
  <div class="account-container">
    <div class="account-title mb20">{{ $t('quotation.operateHistory') }}
      <el-button class="button-group-button" @click="cancel" icon="el-icon-remove-outline">{{ $t('common.cancel') }}</el-button>
    </div>
    <div class="content">
      <div class="card card-base" :class="{ 'card-full': true }">
        <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>
            <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="version">
                <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="projectType">
                <el-select :disabled="disableFlag" v-model="form.projectType"
                           :placeholder="$t('common.pleaseSelect') + $t('project.type')" style="width: 16vw;">
                  <el-option v-for="item in dict.type.project_type" :key="Number(item.value)"
                             :label="item.label" :value="Number(item.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" class="col-padding-right">
              <!-- 关联项目 -->
              <el-form-item :label="$t('follow.relatedProject')" prop="accountGroup">
                <el-select :disabled="disableFlag" v-model="form.relatedProject"
                           :placeholder="$t('common.pleaseSelect') + $t('follow.relatedProject')" style="width: 100%">
                  <el-option v-for="item in projectList" :key="Number(item.value)"
                             :label="item.label" :value="Number(item.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--币种 -->
              <el-form-item :label="$t('project.currency')" prop="accountGroup">
                <el-select :disabled="disableFlag" v-model="form.currency" 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>
            <el-col :span="8" class="col-padding-right">
              <!--国家 -->
              <el-form-item :label="$t('account.country')" prop="phone">
                <el-select :disabled="disableFlag" v-model="form.country" 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="phone">
                <el-select :disabled="disableFlag" v-model="form.city" style="width:16vw;"
                           :placeholder="$t('common.pleaseSelect') + $t('project.city')">
                  <el-option v-for="dict in cityList" :key="Number(dict.value)"
                             :label="dict.label" :value="Number(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div :class="{ 'contact-box': true }">
          <el-table :data="operateHistoryList" max-height="350px">
            <el-table-column prop="operateContext" :label="$t('quotation.operateContext')" min-width="100px"/>
            <el-table-column prop="operator" :label="$t('quotation.operator')" min-width="100px"/>
            <el-table-column prop="operateTime" :label="$t('quotation.operateTime')" min-width="100px"/>
          </el-table>
          <pagination v-show="total > 0"
                      :total="total"
                      :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList"/>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "OperateHistory",
  dicts: ['project_type', 'currency_type'],
  data() {
    return {
      operateHistoryList: [],
      countryList: [{label: '中国', value: '1'}],
      cityList: [{label: '苏州', value: '1'}],
      form: {
        quotationNo: 'BJ20241212001',
        version: 1,
        projectType: 1,
        relatedProject: 1,
        currency: 1,
        country: 1,
        city: 1,
      },
      projectList: [
        {label: 'XM0001: 项目名称、国家、城市、开发商', value: 1}
      ],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      disableFlag: true,
    };
  },
  created() {
    this.getList();
  },
  activated() {
  },
  methods: {
    getList() {
      for (let i = 0; i < 20; i++) {
        this.operateHistoryList.push({
          operateContext: '报价信息录入',
          operator: 'XXXXXXXX',
          operateTime: '2024-12-12 12:12:12',
        })
      }
      this.total = this.operateHistoryList.length
    },
    /** 返回上个页面 */
    cancel() {
      this.$tab.closeOpenPage({path: "/quotation/quotation"});
    },
  }
}
</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;
  }
}

.button-group-button {
  float: right;
  margin-right: 5px;
}

// ::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;

      .button-group {
        position: absolute;
        bottom: 10px;
        right: 20px;
      }
    }

    .card-height {
      height: 1332px;
    }

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

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

  .item-size {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
}
</style>
