<!-- 查看报价列表 -->
<template>
  <div>
    <el-dialog title="查看报价" :visible.sync="dialogVisible" width="800px" :before-close="handleCancel">
      <!-- 列表 -->
      <el-table stripe border v-loading="loading" :clear-selection="false" :data="tableList" ref="table" @selection-change="handleSelectionChange">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="供应商名称" align="center" prop="companyName" />
        <el-table-column label="报价" align="center" prop="moldCost">
          <template v-slot="scope">
            {{(scope.row.moldCost) ? scope.row.moldCost + '元' : ''}}
          </template>
        </el-table-column>

        <el-table-column label="报价时间" align="center" prop="createTime" width="250">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中标状态" align="center" prop="isWin">
          <template v-slot="scope">
            <dict-tag :type="DICT_TYPE.BS_SUPPLIER_TYPE" :value="scope.row.isWin" />
          </template>
        </el-table-column>
        <el-table-column label="报价内容" width="150" align="center" prop="remark">
          <template v-slot="scope">
            <el-button type="primary" @click="handleShowContent(scope.row.remark)" size="mini">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column label="报价附件" width="150" align="center" prop="files">
          <template v-slot="scope">
            <div class="file-box">
              <div class="item-box" v-for="(item,index) in scope.row.files" :key="index">
                <el-tag>{{item.name}}</el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="mini">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="报价内容" :visible.sync="isShow" width="800px" @close="isShow=false">
      <editor v-model="remark" :readOnly="true" :min-height="192" />
    </el-dialog>
  </div>
</template>

<script>
import { getMaterielPage } from "@/api/bs/materiel";
import { getPageList } from "@/api/bs/quotationSheetBidding";
import Editor from '@/components/Editor';
export default {
  name: '',
  components: {
    Editor
  },
  props: {
    isOpen: Boolean,
    userList: Array,
    selectIds: Array,
    quotationId: [Number, String]
  },
  watch: {
    isOpen: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.handleInit()
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      remark: null,
      isShow: false,
      dialogVisible: false,
      loading: false,
      tableList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 1000,
      },
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.handleInit()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleShowContent(remark) {
      this.remark = remark
      this.isShow = true
    },
    handleInit() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    handleFilterExtendList(list) {
      let str = '-'
      let arr = []
      if (Array.isArray(list) && list.length) {
        list.forEach(n => {
          arr.push(`${n.key}:${n.name}`)
        })
      }
      str = arr.join('、') || '-'
      return str
    },
    handleSelectionChange(arr) {
      this.selectArr = arr;
    },
    getList() {
      this.loading = true;
      this.queryParams.quotationId = this.quotationId
      // 执行查询
      getPageList(this.queryParams).then(response => {
        this.tableList = response.data.list;
        this.total = response.data.total;
        this.tableList = (response.data.list || [])
        this.loading = false;
      });
    },
    handleCancel() {
      this.$emit('onCancel')
    },
    handleConfirm() {
      this.$emit('onConfirm', this.selectArr)
    },
    handleInit() {
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 1000
      this.cacheArr = []
      this.getList()
    },
  }
}

</script>
<style lang='scss' scoped>
::v-deep .file-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .item-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    width: 100%;
    .el-tag {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>