<template>
  <el-dialog
    title="修改"
    :visible.sync="dialogVisible"
    width="1500px"
    modal-append-to-body
  >
    <div  style="position: relative">
      <el-button  type="primary" size="small" @click="addTab">新增</el-button>
      <el-button  type="danger" size="small" @click="deleteTab">删除</el-button>
      <el-upload
        class="upload-demo"
        style="display: inline;margin-left: 10px"
        :data="flelist"
        :action='url'
        :headers="headers"
        :on-success="handleImportSuccess"
        :before-upload="handleBeforeUpload"
        :show-file-list="false"
        :auto-upload="true"
      >
        <el-button size="small" type="primary">导入</el-button>
      </el-upload>
      <el-button  type="text" size="small" @click="download">下载模版</el-button>
      <div class="table">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :rules="rules"
        >
          <el-table
            v-loading="loading"
            :data="deptList"
            row-key="deptId"
            :cell-style="{'align-items':'center',}"
            max-height="350px"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            style="width:130%">
            <el-table-column
              type="selection"
              min-width="55">
              <!--            <template slot-scope="scope">-->
              <!--              <el-form-item >-->
              <!--              </el-form-item>-->
              <!--            </template>-->
            </el-table-column>
            <el-table-column prop="batchNo" label="批次号" min-width="100" align="center">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.seller">-->
                <el-input
                  v-model="scope.row.batchNo"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="seller" label="销售方" min-width="100" align="center">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.seller">-->
                <el-input
                  v-model="scope.row.seller"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="buyer" label="购买方" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.buyer">-->
                <el-input
                  v-model="scope.row.buyer"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectNo" label="主业WBS编码" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.projectNo">-->
                <el-input
                  v-model="scope.row.projectNo"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="主业项目名称" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.projectName">-->
                <el-input
                  v-model="scope.row.projectName"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="产业项目编码" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.ynProjectNo">-->
                <el-input
                  v-model="scope.row.ynProjectNo"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="产业项目名称" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.ynProjectName">-->
                <el-input
                  v-model="scope.row.ynProjectName"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="申请单分类" min-width="120">
              <template slot-scope="scope">
                <el-select   v-model="scope.row.applyType" placeholder="请选择">
                  <el-option label="项目类" value="项目类"></el-option>
                  <el-option label="非项目类" value="非项目类"></el-option>
                </el-select>
                <!--              <el-form-item  :prop="scope.row.applyType">-->
<!--                <el-input-->
<!--                  v-model="scope.row.applyType"-->
<!--                  placeholder="请输入新值"-->
<!--                ></el-input>-->
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="costType" label="费用类型" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.costType">-->
                <el-input
                  v-model="scope.row.costType"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="projectName" label="合同金额" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.contractAmount">-->
                <el-input
                  v-model="scope.row.contractAmount"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
<!--            <el-table-column prop="projectName" label="可用预算" min-width="120">-->
<!--              <template slot-scope="scope">-->
<!--                &lt;!&ndash;              <el-form-item  :prop="scope.row.validBudgetAmount">&ndash;&gt;-->
<!--                <el-input-->
<!--                  v-model="scope.row.validBudgetAmount"-->
<!--                  placeholder="请输入新值"-->
<!--                ></el-input>-->
<!--                &lt;!&ndash;              </el-form-item>&ndash;&gt;-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="taxAmount" label="本次开票金额(含税)" min-width="140">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.taxAmount">-->
                <el-input
                  v-model="scope.row.taxAmount"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="taxRate" label="税率" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.taxRate">-->
                <el-input
                  v-model="scope.row.taxRate"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="taker" label="收票人(业务人员)" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.taker">-->
                <el-input
                  v-model="scope.row.taker"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="takerUnit" label="收票人单位(部门)" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.takerUnit">-->
                <el-input
                  v-model="scope.row.takerUnit"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>
            <el-table-column prop="telephone" label="联系电话" min-width="120">
              <template slot-scope="scope">
                <!--              <el-form-item  :prop="scope.row.telephone">-->
                <el-input
                  v-model="scope.row.telephone"
                  placeholder="请输入新值"
                ></el-input>
                <!--              </el-form-item>-->
              </template>
            </el-table-column>

          </el-table>
          <div>
        <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </span>
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {downloadTemplate, invoiceImport, applySave, applyDetail} from '@/api/utils'
import {list,rules} from '../dopos'
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      title: "详情",
      deptList:[],
      list:list,
      dialogVisible: false,
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      flelist:null,
      url:process.env.VUE_APP_BASE_API + "/adsMatHyxtInvoiceD/invoiceImport",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      ruleForm:{
        seller:'',
        buyer:'',
        projectNo:'',
        projectName:'',
        costType:'',
        taxAmount:'',
        taxRate:'',
        taker:'',
        takerUnit:'',
        telephone:'',
      },
      productAttrForm:null,
      rules:rules,
      numberPar:0,
      Selection:[],
    };
  },
  methods: {
    handleSelectionChange(val){
      this.Selection=val
    },
    submitForm(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res= await applySave(this.deptList,this.row.id)
          if(res.code==200){
            this.$message.success('保存成功')
            this.dialogVisible=false
            this.$emit('handele')
            this.deptList=[]
          }else {
            this.$message.success('保存失败')
          }
        } else {
          return this.$message.info('请输入必填项')
        }
      });
    },
    //导入
    handleImportSuccess(res) {
      this.deptList = res.data || [];
      this.$message.success("导入成功");
    },
    //导入前
    async handleBeforeUpload(val){
      let data=new FormData()
      data.append('file',val)
      let res= await invoiceImport(data)
      this.deptList=res.data
    },
    //下载
    async download(){
      let res=await downloadTemplate()
      if(res){
        const elink = document.createElement('a');
        elink.download = `开票申请.xls`;
        elink.style.display = 'none';
        const blob = new Blob([res], { type: 'application/x-msdownload' });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      }else {
        this.$message.error('导出异常请联系管理员');
      }
    },
    addTab(){
      this.numberPar++
      this.deptList.push({numberPar:'p'+this.numberPar})
    },
    deleteTab(){
      console.log(this.deptList,'this.deptList')
      let data=this.deptList
      let list=[]
      list = this.deptList.filter(f=>this.Selection.every(e=>e.numberPar!==f.numberPar));
      console.log(list,'---------------')
      this.deptList=list
    },
    show(row){
      this.dialogVisible=true
      this.row=row
      this.getData(row)
    },
    async getData(val){
      let data={
        id:val.id
      }
      let res= await applyDetail(data)
      this.deptList=res.data.invoiceList
    },
  }
};
</script>

<style lang="scss" scoped>

.table {
  height: 450px !important;
  width: 100%;
  margin-top: 10px;
}
.dialog-footer{
  display: flex;
  position: absolute;
  left: 50%;
  transform:  translateX(-50%);
  bottom: 0;
}
.btom{
  //position: relative;
  //top: 300px;
  display: flex;
  justify-content: center;
}
::v-deep .el-table__cell{

  align-items: center;
}
</style>
