<!-- 对账单详情 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 顶部按钮组 -->
      <div class="page-top">
        <el-button-group class="s-p-t-g1" style="border">
          <el-button @click="gettablelist">刷新</el-button>
          <el-button @click="addfeiyong('')">新增费用</el-button>
          <el-button @click="orderType">按单据类型排序</el-button>
          <el-button @click="exportpage('pdf')">下载</el-button>
          <el-button @click="exportpage('excel')">导出</el-button>
          <el-button @click="deletcheck">删除</el-button>
        </el-button-group>
      </div>
      <!-- 标题-->
      <div class="dzd_title">
        <span class="t1">{{ userInfo.companyName }}</span>
        <h1 class="t2">对账单</h1>
      </div>
      <!--基本信息-->
      <div class="dzd_infp">
        <div class="it">
          <label>对账时间:</label>
          <span>
            {{ tableData.pamentStartTime }}-{{ tableData.pamentEndTime }}
          </span>
        </div>
        <div class="it">
          <label>供应商:</label>
          <span>{{ tableData.supplierName }}</span>
        </div>
        <div class="it">
          <label>付款条件:</label>
          <span>{{ tableData.payContion }}</span>
        </div>
        <div class="it">
          <label>联系人:</label>
          <span>{{ tableData.supplierContacts }}</span>
        </div>
        <div class="it">
          <label>手机:</label>
          <span>{{ tableData.supplierMobile }}</span>
        </div>
        <div class="it">
          <label>固定电话:</label>
          <span>{{ tableData.supplierTel }}</span>
        </div>
        <div class="it">
          <label>邮箱:</label>
          <span>{{ tableData.supplieremail }}</span>
        </div>
        <div class="it">
          <label>地址:</label>
          <span>{{ tableData.supplierAddress }}</span>
        </div>
      </div>
      <!--表格信息-->
      <div class="dzd_table">
        <el-table
          :data="tableData.details"
          border
          @cell-click="goclick"
          @selection-change="handleSelectionChange"
          class="table-box"
          ref="tableInfoRef"
          style="width: 100%; font-size: 12px;"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column prop="jiaoHuoRemark" align="center" label="NO.">
            <template #default="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column prop="orderDate" align="center" label="入库日期" />
          <el-table-column prop="sheetType" align="center" label="单据类型" />
          <el-table-column
            prop="songhuoSheetNo"
            align="center"
            label="送货单号"
          />
          <el-table-column prop="purNo" align="center" label="采购单号" />
          <el-table-column
            prop="materialNumberSj"
            align="center"
            label="物料编码"
          />
          <el-table-column
            prop="materialNameSj"
            align="center"
            label="物料名称"
          />
          <el-table-column
            prop="materialGuigeSj"
            align="center"
            label="规格型号"
          />
          <el-table-column prop="fisFree" align="center" label="是否赠品" />
          <el-table-column prop="shouHuoNum" align="center" label="数量" />
          <el-table-column
            prop="ordPrice"
            align="left"
            label="含税单价（￥）"
            width="105"
          >
            <template #header>
              含税单价（￥）
            </template>
          </el-table-column>
          <el-table-column
            prop="actPrice"
            align="left"
            label="实际单价（￥）"
            width="105"
          >
            <template #header>
              实际单价（￥）
            </template>
            <template #default="scope">
              <span>{{ scope.row.actPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taxRate" align="left" label="税率%" />
          <el-table-column prop="money" align="left" label="金额（￥）" />
          <el-table-column
            prop="jiaoHuoAddress"
            align="left"
            label="送货地址（￥）"
          />
          <el-table-column prop="jiaoHuoRemark" align="left" label="备注" />
        </el-table>
      </div>
      <span
        class="it"
        style="margin-left: 10%; margin-bottom: 1%; font-size: 14px;"
      >
        供应商付款资料及账号：
      </span>
      <div style="display: flex; flex-direction: row;" class="dzd_db">
        <span class="it">开户行:{{ tableData.suppliereBank }}</span>
        <span class="it">开户名称:{{ tableData.suppliereBankName }}</span>
        <span class="it">卡号:{{ tableData.suppliereAccount }}</span>
      </div>
      <!-- 底部 -->
      <div class="sale-page-footer">
        <div class="footer-left">
          <div>
            <span>合计:</span>
            <span class="sale-number-color">
              数量{{ tableData.totalNumber }}, 金额{{ tableData.totalMoney }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 单价修改-->
    <el-dialog title="修改实际单价" v-model="priceVisible" width="20%">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-input v-model="price" />
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="priceset()"
            size="small"
            class="qdbtn"
          >
            确定
          </el-button>
          <el-button @click="priceVisible = false" size="small">
            取 消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新增费用弹框-->
    <el-dialog title="新增费用" v-model="dialogVisible" width="50%">
      <div>
        <el-form ref="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="入库日期" class="item-bt-s rq">
                <el-date-picker v-model="form.songHuoSheetDate" type="date" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单据类型">
                <el-input
                  v-model="form.sheetType"
                  maxlength="255"
                  placeholder="请输入单据类型"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="送货单号">
                <el-input
                  v-model="form.songhuoSheetNo"
                  maxlength="255"
                  placeholder="请输入送货单号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="采购单号">
                <el-input
                  v-model="form.purNo"
                  maxlength="255"
                  placeholder="请输入采购单号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采购入库单号">
                <el-input
                  v-model="form.ruKuSheetNo"
                  maxlength="255"
                  placeholder="请输入采购入库单号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料编码">
                <el-input
                  v-model="form.materialNumberSj"
                  maxlength="255"
                  placeholder="请输入物料编码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="物料名称">
                <el-input
                  v-model="form.materialNameSj"
                  maxlength="255"
                  placeholder="请输入物料名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规格型号">
                <el-input
                  v-model="form.materialGuigeSj"
                  maxlength="255"
                  placeholder="请输入规格型号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数量">
                <el-input
                  v-model="form.shouHuoNum"
                  @change="numChange"
                  placeholder="请输入数量"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="是否赠品" class="zp" placeholder="请选择">
                <el-select v-model="form.fisFree">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="含税单价">
                <el-input
                  v-model="form.ordPrice"
                  maxlength="255"
                  placeholder="请输入含税单价"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率">
                <el-input
                  v-model="form.taxRate"
                  maxlength="255"
                  placeholder="请输入税率"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="实际单价">
                <el-input
                  v-model="form.actPrice"
                  maxlength="255"
                  @change="priceChange"
                  placeholder="请输入实际单价"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="金额">
                <el-input
                  v-model="theactprice"
                  maxlength="255"
                  disabled
                  placeholder="实际单价x数量"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="送货地址">
                <el-input
                  v-model="form.jiaoHuoAddress"
                  maxlength="255"
                  placeholder="请输入地址"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="form.jiaoHuoRemark"
                  maxlength="255"
                  placeholder="请输入备注信息"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="addfeiyong('确认')"
            size="small"
            class="qdbtn"
          >
            提交
          </el-button>
          <el-button @click="dialogVisible = false" size="small">
            取 消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  data() {
    return {
      itid: '',
      price: '',
      theactprice:'',
      priceVisible: false,
      dialogVisible: false,
      tableData: { details: [] },
      isSort: true,
      formdata: {
        sheetNo: this.$route.query.sheetNo,
        isSort: false,
      },
      form: {
        sheetNo: this.$route.query.sheetNo, //对账单号
        songhuoSheetNo: '', //送货单号
        shouHuoNum: '', //收货数量
        ordPrice: '', //含税单价
        actPrice: '', //实际单价
        songHuoSheetDate: '', //单据日期
        jiaoHuoAddress: '', //交货地址
        jiaoHuoRemark: '', //交货备注
        sheetType: '', //单据类型
        fisFree: '', //是否赠品
        purNo: '', //采购单号
        ruKuSheetNo: '', //单据编号 有采购入库单，销售退货单，还有其他单
        materialNumberSj: '', //物料编码
        materialNameSj: '', //物料名称
        materialGuigeSj: '', //物料规格
        taxRate: '', //taxRate
      },
      multipleSelection: [],
    }
  },
  setup() {
    console.log('setup')
  },
  computed: {
    ...mapState({
      userInfo: (state) =>
        JSON.stringify(state) !== '{}' && state.user && state.user.userInfo
          ? state.user.userInfo
          : {},
      orgId: (state) =>
        state && state.org && state.org.orgId ? state.org.orgId : null,
    }),
  },
  created() {
    this.gettablelist()
  },
  watch: {},
  mounted() {},
  methods: {
    priceChange(val){
      this.theactprice =((val ? val :0 ) *this.form.shouHuoNum) ? (val *this.form.shouHuoNum) :0
    },
    numChange(val){
      this.theactprice =((val ? val :0 ) *this.form.actPrice) ? (val *this.form.actPrice) :0
    },
    deletcheck() {
      if (this.multipleSelection.length > 0) {
        let ids = []
        this.multipleSelection.forEach((it) => {
            ids.push( it.id)
          })
        this.$http.post('Pament/delete', {ids: ids}).then((res) => {
          if (res.status === 200) {
            this.$message.success({ message: '删除成功', showClose: true })
            this.gettablelist()
          }
        })
        
      } else {
        this.$message.error({ message: '请先勾选在删除！', showClose: true })
      }
    },
    goclick(row, column, event, cell) {
      if (column.property == 'actPrice') {
        this.itid = row.id
        this.price = row.actPrice
        this.priceVisible = true
      }
    },
    priceset() {
      this.$http
        .post('Pament/updateprice', {
          id: this.itid,
          price: this.price,
        })
        .then((res) => {
          if (res.status === 200) {
            this.tableData = res.data
            this.$message.success({ message: '修改成功', showClose: true })
            this.priceVisible = false
          }
        })
    },
    handleSelectionChange(value) {
      this.multipleSelection = value
    },
    //新增费用
    addfeiyong(value) {
      if (value) {
        this.$http.post('/Pament/savecost', this.form).then((res) => {
          if (res.status === 200) {
            this.dialogVisible = false
            this.tableData = res.data
            this.$message.success({ message: '新增成功', showClose: true })
            this.form = {
              sheetNo: this.$route.query.sheetNo, //对账单号
              songhuoSheetNo: '', //送货单号
              shouHuoNum: '', //收货数量
              ordPrice: '', //含税单价
              actPrice: '', //实际单价
              songHuoSheetDate: '', //单据日期
              jiaoHuoAddress: '', //交货地址
              jiaoHuoRemark: '', //交货备注
              sheetType: '', //单据类型
              fisFree: '', //是否赠品
              purNo: '', //采购单号
              ruKuSheetNo: '', //单据编号 有采购入库单，销售退货单，还有其他单
              materialNumberSj: '', //物料编码
              materialNameSj: '', //物料名称
              materialGuigeSj: '', //物料规格
              taxRate: '', //taxRate
            }
          }
        })
      } else {
        this.dialogVisible = true
      }
    },
    // 按单据类型排序
    orderType() {
      this.formdata.isSort = true
      this.gettablelist()
    },
    // 导出/下载pdf
    exportpage(type) {
      var urlpath = ''
      if (type == 'excel') {
        urlpath = '/Pament/exportexcel'
      } else {
        urlpath = '/Pament/exportpdf'
      }
      axios
        .request({
          method: 'POST',
          url:
            import.meta.env.VITE_APP_API_BASEURL +
            import.meta.env.VITE_APP_API_VERSION +
            urlpath,
          method: 'post',
          headers: {
            Authorization: localStorage.getItem('userToken'),
          },
          data: {
            sheetNo: this.$route.query.sheetNo,
            isSort: this.isSort,
          },
          responseType: type == 'excel' ? 'blob' : 'arraybuffer',
        })
        .then((res) => {
          console.log('下载的文件', res)
          let a = document.createElement('a')
          //ArrayBuffer 转为 Blob
          let blob = new Blob([res.data], {
            type:
              type == 'excel' ? 'application/vnd.ms-excel' : 'application/pdf',
          })
          let objectUrl = URL.createObjectURL(blob)
          a.setAttribute('href', objectUrl)
          a.setAttribute(
            'download',
            type == 'excel'
              ? this.$route.query.sheetNo + '.xls'
              : this.$route.query.sheetNo + '.pdf',
          )
          a.click()
        })
    },
    // 获取列表信息
    gettablelist() {
      this.$http.post('/Pament/getpamentdetails', this.formdata).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data
        }
      })
    },
    handleCurrentChange() {},
    handleSizeChange() {},
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';
@import '../../../components/public/toolBtn/toolBtn.scss';
.isDisable {
  color: var(--el-text-color-placeholder) !important;
  cursor: not-allowed !important;
}
.dzd_title {
  text-align: center;
  margin-top: 30px;
  .t1 {
    font-size: 24px;
  }
  .t2 {
    font-size: 28px;
    margin-top: 10px;
  }
}
.dzd_infp,
.dzd_db {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 10%;
  margin-bottom: 20px;
  font-size: 14px;
  .it {
    box-sizing: border-box;
    width: 33.33%;
    padding: 0 13px;
    margin-bottom: 10px;
  }
}
.dzd_db .it {
  width: 25%;
}
.dzd_table {
  margin: 0 20px;
  margin-bottom: 20px;
}
.page-top .s-p-t-g1::after {
  background: #fff;
}
.el-select {
  width: 225px;
}
.qdbtn:hover,
.qdbtn:focus {
  background: #409eff;
}
</style>
