<template>
  <div class="white_bg burt-container">
    <Goback title="回款详情" />
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select v-model="form.payorCode" placeholder="请选择保险公司" allow-clear :disabled="!isEdit">
              <a-select-option v-for="item in companyOptions" :key="item.id" :value="item.payorCode">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="5" :sm="12">
          <a-form-model-item label="回款日期">
            <a-date-picker format="YYYY-MM-DD" format-value="YYYY-MM-DD 00:00:00"  v-model="form.backDate" placeholder="选择日期" allow-clear :disabled="!isEdit" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="5" :sm="12">
          <a-form-model-item label="回款金额(人民币)">
            <a-input type="number" v-model="form.backAmountCny"  placeholder="请输入金额" allow-clear :disabled="!isEdit" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="5" :sm="12">
          <a-form-model-item label="回款金额(美元)">
            <a-input type="number" v-model="form.backAmountUsd" placeholder="请输入金额" allow-clear :disabled="!isEdit" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="汇率差">
            <a-input v-model="form.backExchangeRate" placeholder="请输入金额" allow-clear :disabled="!isEdit" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="上传银行付款凭证">
            <a-upload name="file" :multiple="false" :showUploadList="true" :disabled="!isEdit"
              :fileList="fileList"
              :customRequest="(file)=>uploadFile(file)"
              :beforeUpload="()=>beforeUpload()"
              :remove="(file)=>removeFile(file)">
              <a-button type="primary"> <Icon name="ssiupload" :size="18" />上传文件 </a-button>
            </a-upload>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :lg="12" class="none-label" v-if="isEdit">
          <a-form-model-item label="button">
            <a-button class="mar-left10" type="primary" @click="addNewEvt">
              <Icon :name="backMoneyNo?'ssibaocun':'ssiadd'" :size="14" />{{backMoneyNo?'保存回款':'新建回款'}}
            </a-button>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" class="none-label" v-if="isEdit">
          <a-form-model-item label="button">
            <!-- <a-button class="mar-left10" type="primary" @click="handlerSearch">
              <Icon name="ssisearch_active" :size="14" />查询
            </a-button> -->
            <a-button class="mar-left10" type="primary" @click="addNewEOB">
              <Icon :name="isEditNewEOB?'ssibaocun':'ssiadd'" :size="14" />{{isEditNewEOB? '保存EOB': '添加EOB'}}
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- table -->
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: true }" :pagination="false"
      :row-selection="isEditNewEOB? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }: null">
      <template slot="eobNo" slot-scope="text,record">
        <a @click="toEOBDetail(record)">{{text}}</a>
      </template>
      <template slot="eobSts" slot-scope="text">
        {{text | formatEOBStatus}}
      </template>
      <template slot="eobBackDate" slot-scope="text">
        {{text?moment(text).format('YYYY-MM-DD'):''}}
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button type="link" @click.stop="editEvt(record)">修改</a-button>
        <!-- <a-button v-if="record.backMoneyNo" type="link" class="danger" @click.stop="delRecord(index)">删除</a-button> -->
      </template>
    </a-table>
    <BurtPagination :pagination="pagination" @pageChange="pageChange" />

    <a-modal title="编辑" :visible="dialogShow" width="700px" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="EOB状态" prop="eobSts">
              <a-select v-model="editFormObj.eobSts" placeholder="请选择状态" allow-clear>
                <a-select-option v-for="(item,i) in EOBStatusOptions" :key="i" :value="item.value">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="EOB核销时间" prop="eobBackDate">
              <a-date-picker format="YYYY年MM月DD日" v-model="editFormObj.eobBackDate" placeholder="选择日期" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="EOB回款(人民币)" prop="eobBackMoneyCny">
              <a-input v-model.trim="editFormObj.eobBackMoneyCny" placeholder="EOB回款(人民币)" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="EOB回款(美元)" prop="eobBackMoneyUsd">
              <a-input v-model.trim="editFormObj.eobBackMoneyUsd" placeholder="EOB回款(美元)" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Goback from "@/components/CUSTOMER/goback";
import BurtPagination from "@/components/CUSTOMER/pagation";
import {EOBStatusOptions} from '@/utils/utilsdictOptions.js'
import moment from "moment";
import mixins from "@/mixins";
export default {
  data() {
    return {
      isEdit: false,
      EOBStatusOptions,
      dialogShow: false,
      form: {
        payorCode: '',
        backDate: null,
        backAmountCny: '',
        backAmountUsd: '',
        backExchangeRate: ''
      },
      fileList: [], // 上传文件列表
      dataList: [],
      backEobList: [], // eob回款列表
      isEditNewEOB: false, //是否在新建回款
      companyOptions: [], //保险公司
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      selectedRowKeys: [], // Check here to configure the default column
      backMoneyNo: '',
      editFormObj: {
        id: '',
        eobNo: '',
        eobSts: '',
        eobBackDate: null,
        eobBackMoneyCny: '',
        eobBackMoneyUsd: '',
      },
      editRules: {
        backAmountUsd: [{ required: true, message: "请输入", trigger: "blur" }],
        backAmount: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  mixins: [mixins],
  components: {
    Goback,
    BurtPagination,
  },
  computed: {
    columns() {
        const base = [
            { title: "EOB编号", dataIndex: "eobNo", scopedSlots: { customRender: 'eobNo' }, ellipsis: true, width: 150 },
            { title: "EOB名称", dataIndex: "eobName", ellipsis: true, width: 195 },
            { title: "核销时间", dataIndex: "eobBackDate", ellipsis: true, width: 110, scopedSlots: { customRender: "eobBackDate" }, },
            { title: "保险公司", dataIndex: "payorName", ellipsis: true, width: 110 },
            { title: "EOB状态", dataIndex: "eobSts", ellipsis: true, width: 110, scopedSlots: { customRender: "eobSts" } },
            { title: "EOB赔付金额(人民币)", dataIndex: "eobAmountCny", ellipsis: true, width: 190,},
            { title: "EOB赔付金额(美元)", dataIndex: "eobAmountUsd", ellipsis: true, width: 190,},
            { title: "EOB回款金额(人民币)", dataIndex: "eobBackMoneyCny", ellipsis: true, width: 190,},
            { title: "EOB回款金额(美元)", dataIndex: "eobBackMoneyUsd", ellipsis: true, width: 190,},
            { title: "汇率差", dataIndex: "backExchangeRate", ellipsis: true, width: 110 },
        ];
        if(this.backMoneyNo && !this.isEditNewEOB && this.isEdit){ // 编辑状态下已经保存的数据才可进行操作
            return base.concat([
                { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" },fixed: "right", width: "170px", align: "center"},
            ])
        }
        return base
    }
  },
  created(){
    const { backMoneyNo, isEdit } = this.$route.query
    this.backMoneyNo = backMoneyNo;
    this.isEdit = isEdit;
    this._getCompanyOptions();
    if(backMoneyNo){
      const backMoneyDataDetail = JSON.parse(localStorage.getItem('backMoneyDataDetail') || '{}');
      this.form = backMoneyDataDetail
      this.form.backDate = this.form.backDate ? moment(this.form.backDate).format('YYYY-MM-DD 00:00:00') : null
      
      // 如果有上传附件则显示列表
      if(backMoneyDataDetail.fileList) {
        this.fileList = backMoneyDataDetail.fileList.map(d => {
          const file = {
            uid: Math.random()*10000,
            name: d.fileName,
            status: 'done',
            url: d.fileUrl,
          }
          return file
        })
      }
      
      this.getData();
    }
  },
  methods: {
    moment,
    // 查看的超链点击时链接已经生成好了，所以要点击的时候才set值才是对应的，不然存的都是最后一条数据
    setData(record){
      localStorage.setItem('EobDataDetail', JSON.stringify(record));
    },
    // EOB添加去查看的超链
    toEOBDetail(record){
      const { eobNo } = record;
      localStorage.setItem('EobDataDetail', JSON.stringify(record));
      this.$router.push({
        path: '/verification/detail',
        query: {
          eobNo
        }
      })
    },
    onSelectChange(selectedRowKeys) {
      let arr = [];
      for(let i=0; i<selectedRowKeys.length; i++){
        let idx = selectedRowKeys[i];
        if(this.dataList[idx].backMoneyNo){
          this.$msg.destroy();
          this.$message.warning('回款编号已存在')
        }else{
          arr.push(idx);
        }
      }
      this.selectedRowKeys = arr;
    },
    pageChange(pager) {
      this.pagination = {
        ...this.pagination,
        ...pager
      }
      if(this.isEditNewEOB) { // 点击添加EOB之后 分页数据查询就应该调EOB数据
        this._getNewEOBList()
        return true;
      }
      this.getData();
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.GETCOMPANYOPTIONS().then((res) => {
        this.companyOptions = res.content || [];
      });
    },
    handlerSearch() {
      this.pagination.pageNum = 1;
      this.getData();
    },
    getData() {
      this.$apis.QUERYBACKEOBLIST({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        backMoneyNo: this.backMoneyNo
       })
      .then((res) => {
        if (res.returnCode == "0000") {
          let content = res.content || {};
          this.pagination.total = content.total || 0;
          this.dataList = content.list || [];
          this.backEobList = this.dataList.map(d => d)
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    //添加EOB
    addNewEOB(){
      this.isEditNewEOB = !this.isEditNewEOB;
      if(!this.isEditNewEOB){ //保存
        this.addNewEvt()
        .then(()=>{
          this.isEditNewEOB = false;
        })
      }else{ //查询所有未加入的账单
        this.pagination.pageNum = 1;
        this._getNewEOBList()
      }
    },
    _getNewEOBList(){
        this.$apis.QUERYEOBINFOLIST({
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            this.selectedRowKeys = [];
            let content = res.content || {};
            this.pagination.total = content.total || 0;
            this.dataList = content.list || [];
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
     //新建/保存回款
    addNewEvt(){
      return new Promise((resolve,reject)=>{
        if(!this.form.backAmountCny){
            this.$message.warning("请输入回款金额");
            reject();
            return;
        }

        let backMoneyEobList = [];
        if(!this.isEditNewEOB) {
          backMoneyEobList = this.backEobList
        } else {
          this.dataList.forEach((item,index)=>{
            if(this.selectedRowKeys.indexOf(index)!=-1){
                backMoneyEobList.push({
                    id: item.id,
                    eobNo: item.eobNo,
                    eobSts: item.eobSts,
                    eobBackDate: item.eobBackDate?moment(item.eobBackDate).format('YYYY-MM-DD 00:00:00'):'',
                    eobBackMoneyCny: item.eobBackMoneyCny,
                    eobBackMoneyUsd: item.eobBackMoneyUsd,
                })
            }
          })
        }   
        
        const formData = {
            ...this.form,
            backMoneyEobList: backMoneyEobList,
            backDate: this.form.backDate? moment(this.form.backDate).format('YYYY-MM-DD 00:00:00'):'',
            backMoneyNo: this.backMoneyNo, //回款编号
        }

        // 上传附件格式转换
        formData.fileList = this.fileList.map(d => {
          const file = {
            fileName: d.name,
            fileUrl: d.url
          }
          return file
        })

        this.$apis.SAVEBACKMONEY(formData)
        .then((res) => {
          if (res.returnCode == "0000") {
            this.backMoneyNo = res.content;
            this.$message.success("成功");
            this.selectedRowKeys = [];
            this.getData();
  
            // this.$router.go(-1);
            resolve();
          } else {
            this.$message.error(res.returnMsg);
            reject();
          }
        });
      })
    },
    //删除记录
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          this.$apis.DELETEBACKMONEY({
            backMoneyNo: this.dataList[index].backMoneyNo,
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("删除成功");
              this.dataList.splice(index, 1);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        },
        onCancel: () => {},
      });
    },
    editEvt(record) {
      this.editFormObj = {
        id: record.id,
        eobNo: record.eobNo || "",
        eobSts: record.eobSts || "",
        eobBackDate: record.eobBackDate?moment(record.eobBackDate).format('YYYY-MM-DD 00:00:00'):"",
        eobBackMoneyCny: record.eobBackMoneyCny || "",
        eobBackMoneyUsd: record.eobBackMoneyUsd || "",
      };
      this.dialogShow = true;
    },
    //编辑保存
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let editFormObj = {
            ...this.editFormObj,
            eobBackDate: this.editFormObj.eobBackDate?moment(this.editFormObj.eobBackDate).format('YYYY-MM-DD 00:00:00'):"",
          }
          this.$apis.SAVEBACKMONEY({
            ...this.form,
            backMoneyEobList: [editFormObj],
            backDate: this.form.backDate? moment(this.form.backDate).format('YYYY-MM-DD 00:00:00'):'',
            backMoneyNo: this.backMoneyNo, //回款编号
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("编辑成功");
              this.dialogShow = false;
              this.getData();
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        }
      });
    },

    /* ======== 上传区域 ======== */
    // 上传之前
    beforeUpload(){
      const len = this.fileList.length;
      if(len >= 5){
        this.$message.warning('不能超过5个文件');
        return false;
      }
      return true;
    },
    // 删除文件
    removeFile(file){
      let index;
      this.fileList.forEach((item, i) => {
        if (item.uid == file.uid) {
          index = i;
        }
      });
      this.fileList.splice(index, 1);
      return true;
    },
    // 上传文件
    uploadFile(fileData){
      let formData = new FormData();
      formData.append("file", fileData.file);
      this.$apis.UPLOADIMG(formData)
      .then((res)=>{
        fileData.onSuccess();
        let tmp =  {
          uid: Math.random()*10000,
          name: res.original,
          status: 'done',
          url: res.url,
        }
        this.fileList.push(tmp);

        this.$forceUpdate();
      })
    }
  },
};
</script>

<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.success.ant-btn-link {
  color: #4cd964;
}
.danger.ant-btn-link {
  color: #ff3b30;
}
</style>