<template>
  <div>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="isShow"
      :title="`${curObj.deal_clerk}关于${curObj.deal_item}(${dtlObj.house_no})的成交详情`"
      :fullscreen="false"
      width="800px"
      custom-class="xl-dialog"
      center
    >
      <div class="scoped-box"  ref="cutScreen">
        <div class="scoped-info">
          <div class="si-row">
            <div class="si-col">成交楼盘：{{dtlObj.deal_item}}</div>
            <div class="si-col">成交房号：{{dtlObj.house_no}}</div>
            <div class="si-col">房屋类型：{{houseTypeObj[dtlObj.house_type]}}</div>
          </div>
          <div class="si-row">
            <div class="si-col">成交类型：{{dealTypeObj[dtlObj.deal_type]}}</div>
            <div class="si-col">成交日期：{{dtlObj.deal_at}}</div>
            <div class="si-col">折扣体系：{{dtlObj.discount}}</div>
          </div>
          <div class="si-row">
            <div class="si-col">客户姓名：{{dtlObj.customer_name}}</div>
            <div class="si-col">客户电话：{{dtlObj.customer_phone}}</div>
            <div class="si-col">成交备注：{{dtlObj.remark || '无'}}</div>
          </div>
          <div class="si-row">
            <div class="si-col">成交面积：{{dtlObj.area}}㎡</div>
            <div class="si-col">成交总价：{{dtlObj.price}}元</div>
            <div class="si-col">成交单价：{{(Number(dtlObj.price)/dtlObj.area).toFixed(2)}}元</div>
          </div>
          <div class="si-row">
            <div class="si-col">报备渠道：{{dtlObj.report_dept}}</div>
            <div class="si-col" @click="openBrokerageImgPopup">成交佣金：{{dtlObj.brokerage || '-'}}元 <span v-if="dtlObj.brokerage_img" class="img">[图片凭证]</span></div>
            <div class="si-col">成交返佣：{{dtlObj.rebate || '-'}}元</div>
          </div>
        </div>
        <div class="scoped-table">
          <table-list
            :list-loading="listLoading"
            :data="reportFlow"
            :columns="listConfig"
            :current-page="currentPage"
            :page-size="-1"
            >
          </table-list>
        </div>
      </div>
      <div class="xl-form" style="padding-top: 20px;">
        <div class="xl-form-footer">
            <div class="scoped-btn-more">
              <el-button type="small" icon="el-icon-plus" class="xl-form-btn bgc2" @click="openPopup">更新成交进度</el-button>
              <!-- <el-button type="small" icon="el-icon-warning" class="xl-form-btn bgc4" @click="openStatePopup">修改状态</el-button> -->
            </div>
          <el-button class="xl-form-btn t2" @click="close">关闭弹窗</el-button>
          <el-button class="xl-form-btn t3" @click="getScrean">下载</el-button>
        </div>
      </div>
    </el-dialog>
    <record-edit
      :isShow="isDtlShow"
      :pObj="dtlObj"
      :curObj="subObj"
      @close="closePopup"
    />
    <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
  </div>
</template>
<script>
import PopupBigImg from '@/components/Common/PopupBigImg'
import RecordEdit from './RecordEdit'
import baseTable from '_m/baseTable.js'
import { arrToObj } from '@/utils'

export default {
  components: {
    RecordEdit,
    PopupBigImg,
  },
  mixins: [...mixins, baseTable],
  props: {
    isShow: Boolean,
    curObj: Object
  },
  inject: ['parentData'],
  data() {
    return {
      apiStr: 'cust.admtraderecordlist',
      noCreated: true,
      searchForm: {},
      subObj: {},
      isDtlShow: false,
      reportFlow: [],
      dtlObj: {},
      isStateShow: false,
      houseTypeObj: {},
      dealTypeObj: {},
      bigImgShow: false,
      bigImgSrc: '',
    }
  },
  mounted() {
    this.houseTypeObj = arrToObj(this.$dictData.trade_house_type)
    this.dealTypeObj = arrToObj(this.$dictData.trade_deal_type)
    this.listConfig = {
      rows: [
        { label: '佣金到款日', prop: 'info1'},
        { label: '回款比例(%)', prop: 'info2' },
        { label: '是否开票', prop: 'info3', type: 'tag', tags: arrToObj(this.$dictData.sys_yesno	), tagTypeObj: {'1': 'success', '2': 'warning'} },
        { label: '上传凭证', prop: 'info4', type: 'img' },
        { label: '备注', prop: 'remark', fullShow: true, minWidth: 100, align: 'left' },
        { label: '更新时间', prop: 'create_at' },
        { label: '操作', width: 60, type: 'handle2', operations:
          [
            // { label: '编辑', func: this.openPopup, btnType: 'primary' },
            { label: '删除', func: this.delHandle, btnType: 'danger' },
          ]
        }
      ]
    }
  },
  computed: {
    tableData2 () {
      let arr = [...this.tableData]
      arr.map(item => {})
      return arr
    },
    reportStepStr () {
      return arrToObj(this.$dictData.report_step)[this.dtlObj.report_step]
    },
    reportStateStr () {
      return arrToObj(this.$dictData.report_state)[this.dtlObj.report_state]
    }
  },
  watch: {
    isShow: function(val) {
      if (val) {
        this.getData()
      }
    },
  },
  methods: {
    getScrean () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
          // 创建一个新的canvas
        const _canvas = this.$refs.cutScreen
        // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
        const width = _canvas.offsetWidth
        const height = _canvas.offsetHeight
        const canvas2 = document.createElement('canvas')
        const scale = 2
        canvas2.width = width * scale
        canvas2.height = height * scale
        const context1 = canvas2.getContext('2d')
        if(context1) {
          // context1.scale(scale, scale)
          context1.scale(1, 1)
        }
        const opts = {
          scale,
          canvas: canvas2,
          // logging: true, //日志开关，便于查看html2canvas的内部执行流程
          width,
          height,
          // 【重要】开启跨域配置
          useCORS: true 
          }
        html2canvas(_canvas,opts).then((canvas) => {
          const context = canvas2.getContext('2d')
          if(context) {
            context.scale(2,2)
            context.mozImageSmoothingEnabled = false
            context.webkitImageSmoothingEnabled = false
            context.imageSmoothingEnabled = false
          }
          this.screenUrl = canvas.toDataURL()
          var a = document.createElement('a')
          var event = new MouseEvent('click')
          a.download = `${this.curObj.deal_item}(${this.dtlObj.house_no})的成交详情`
          a.href = this.screenUrl
          a.dispatchEvent(event)
          loading.close()
        })
      },100)
    },
    openBrokerageImgPopup () {
      this.bigImgShow = true
    },
    closebigImg () {
      this.bigImgShow = false
    },
    getData () {
      this.$api.cust.admtradedetail({id: this.curObj.id}).then(res => {
        this.dtlObj = res || {}
        this.bigImgSrc = this.dtlObj.brokerage_img || ''
      })
      this.$api.cust.admtraderecordlist({trade_id: this.curObj.id}).then(res => {
        this.reportFlow = res.list || []
      })
    },
    delHandle(row) {
      this.$msg(`您确定要删除该成交记录吗？`, 'confirm', () => {
        this.$api.cust.admtraderecorddel({
          id: row.id
        }).then(data => {
          this.$msgs(`已删除！`)
          this.getData()
        })
      }, null, true)
    },
    close(str) {
      this.$emit('close')
    },
    openPopup(row) {
      if (row && row.id) {
        this.subObj = row
      } else {
        this.subObj = {}
      }
      this.isDtlShow = true
    },
    closePopup(obj) {
      this.isDtlShow = false
      if (obj) {
        this.getData()
      }
    },
    openStatePopup(row) {
      if (row && row.id) {
        this.subObj = row
      } else {
        this.subObj = {}
      }
      this.isStateShow = true
    },
    closeStatePopup(obj) {
      this.isStateShow = false
      if (obj) {
        this.getData()
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.scoped-info {
  border-left: 1px solid #dcdcdc;
  border-top: 1px solid #dcdcdc;
  margin-bottom: 10px;
  .si-row {
    display: flex;
    border-bottom: 1px solid #dcdcdc;
  }
  .si-col {
    width: 33.33%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-right: 1px solid #dcdcdc;
    .img {
      text-decoration: underline;
      color: #2d8cf0;
      cursor: pointer;
    }
  }
}

.scoped-table {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 2px #ccc;
  // border-top: 1px solid #dcdcdc;
  // border-bottom: 1px solid #dcdcdc;
  ::v-deep .xl-pagination {
    position: absolute;
  }
}


.scoped-btn-more {
  position: absolute;
  left: 25px;
}
</style>
