<template>
  <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" v-dialogDrag class="type" width="80%" title="加价转疗程列表" :visible.sync="dialogFormVisible">
    <div class="flex justify-between align-center">
      <div>
        <selec v-if="headOffice == 1" ref="selec" @selecData="selecData"></selec>
        <el-input placeholder="请输入单据号" v-model="queryForm.docNum" clearable class="form-width-ms"></el-input>
        <el-input placeholder="请输入会员名字" class="form-width-ms" v-model="queryForm.memberName" clearable></el-input>
        <el-input maxlength="11" placeholder="请输入会员手机号" class="form-width-ms" v-model="queryForm.mobilePhone" clearable></el-input>
        <el-button size="mini" type="primary" @click="getData">搜索</el-button>
      </div>
      <div v-role="5004102">
        <el-button size="mini" type="" @click="detail" :disabled="radioRowValueList.state == undefined">明细</el-button>
        <el-button size="mini" type="" @click="del" v-if="radioRowValueList.state!=undefined&&radioRowValueList.state==0">删除</el-button>
        <el-button size="mini" type="primary" @click="edit(0)" v-if="radioRowValueList.state==4" plain>修改</el-button>
        <el-button size="mini" type="primary" @click="edit(1)" v-if="radioRowValueList.state!=undefined&&(radioRowValueList.state==0||radioRowValueList.state==2||radioRowValueList.state==4)">送审</el-button>
        <el-button size="mini" type="primary" @click="edit(2)" v-if="radioRowValueList.state!=undefined&&(radioRowValueList.state==1)" plain>回收</el-button>
        <el-button size="mini" type="primary" @click="edit(3)" v-if="radioRowValueList.state!=undefined&&(radioRowValueList.state==1)">审核</el-button>
        <el-button size="mini" type="primary" @click="edit(4)" v-if="radioRowValueList.state!=undefined&&(radioRowValueList.state==3)" plain>反审核</el-button>
      </div>
    </div>
    <el-table class="margin-top-xs" border @row-click="rowClick" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @row-dblclick="rowdbClick" max-height="650" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}">
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column align="center" min-width="30" label="选择">
        <template slot-scope="scope">
          <el-radio v-model="radioRowValue" :label="scope.row.id" @change.native="scope.row">{{null}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="75" label="状态">
        <template slot-scope="scope">
          <el-tag size="medium" effect="dark" :type="
                  scope.row.state == 0
                    ? ''
                    : '' || scope.row.state ==1
                    ? 'success'
                    : '' || scope.row.state == 2
                    ? 'info'
                    : '' || scope.row.state ==3
                    ? 'success'
                    : '' || scope.row.state == 4
                    ? 'warning'
                    : ''
                ">
            <div>
              <span v-show="scope.row.state==0">新创建</span>
              <span v-show="scope.row.state==1">已送审</span>
              <span v-show="scope.row.state==2">已回收</span>
              <span v-show="scope.row.state==3">已审核</span>
              <span v-show="scope.row.state==4">反审核</span>
            </div>
          </el-tag>
        </template>

      </el-table-column>
      <el-table-column align="center" prop="storeName" label="门店" min-width="120"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="120" prop="docNum" label="单据号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="105" prop="docDate" label="时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="memberName" label="会员名字"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="80" prop="mobilePhone" label="会员手机号">
        <template slot-scope="scope">{{ scope.row.mobilePhone }}</template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="changeInMoney" label="转入金额"></el-table-column>
      <el-table-column align="center" min-width="80" prop="changeOutMoney" label="转出金额"></el-table-column>
      <el-table-column align="center" min-width="80" prop="changeInPayMoney" label="支付金额"></el-table-column>
      <el-table-column align="center" min-width="80" prop="debtMoney" label="欠款金额"></el-table-column>
      <el-table-column align="center" prop="storeName" label="所属门店" show-overflow-tooltip min-width="100"></el-table-column>

      <el-table-column align="center" min-width="80" prop="inputBy" label="录单人"></el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px">
      <!-- 分页组件 -->
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <detail ref="detail" @detailData="detailData"></detail>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleExport" :loading="exportLoad" v-if="headOffice">导 出</el-button>
      <el-button size="mini" type="primary" @click="(dialogFormVisible = false)">确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  cardChangePage,
  cardChangeCancel,
  updateStateCardChange,
  exporCardChange
} from "@/api/eashier.js";
import admin from "@/components/staffList/admin/index";
import manager from "@/components/staffList/manager/index";
import staffsles from "@/components/staffList/staff/index";
import detail from "./detail";
import selec from "@/components/store/select/index";
export default {
  components: {
    staffsles,
    manager,
    detail,
    admin,
    selec,
  },
  data() {
    return {
      exportLoad:false,
      primaryDialog: false,
      dialogFormVisible: false, //弹窗开关
      sessionStorageData: {
        allowdebt: false,
      },
      headOffice: sessionStorage.getItem("headOffice") * 1,
      listLoading: false, //list加载提示开启动画
      elementLoadingText: "加载中...", //list加载提示文字
      total: 0, //分页总条数
      queryForm: {
        //查询对象
        pageNum: 1,
        pageSize: 10,
      },
      list: [], //主数组
      activeName: "现付",
      staffDialogVisible: false,
      proForm: {
        staffLists: [],
      },
      staffList: [],
      staffTextValue: "员工添加",
      selectDate: new Date(),
      editIndex: -1,
      radioRowValue: null, //选择列表值
      radioRowValueList: {}, //选择列表对象
    };
  },
  methods: {
    handleExport(){
      this.exportLoad = true
      let params = {
        date:new Date()
      }
      exporCardChange(params).then(res=>{
        this.exportLoad = false
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "加价转疗程导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      })
    },
    //列表数组双击方法
    rowdbClick(row) {
      this.$refs.detail.show(row);
    },
    //点击选中
    rowClick(row) {
      this.radioRowValue = row.id;
      this.radioRowValueList = row;
    },
    edit(number) {
      if (number == 0) {
        this.$refs.detail.show(this.radioRowValueList, "修改");
      } else {
        let form = { id: this.radioRowValueList.id, state: number };
        updateStateCardChange(form).then((res) => {
          if (res.code == "000000") {
            this.radioRowValueList.state = number;
            this.$message.success({
              message: "操作成功!",
            });
            this.getData();
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      }
    },
    //明细方法
    detail() {
      this.$refs.detail.show(this.radioRowValueList);
    },
    del() {},
    //组件传值
    selecData(v) {
      this.queryForm.storeList = v;
      this.getData();
    },
    show() {
      this.dialogFormVisible = true;
      this.radioRowValue = null;
      this.list = [];
      this.radioRowValueList = {};
      if (this.headOffice == 1) {
        this.$nextTick(() => {
          this.$refs.selec.show();
        });
      }
      this.getData();
    },
    //返回当前行的下标
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //获取数据
    async getData() {
      this.listLoading = true;
      let selectDate = this.formatTime(this.selectDate, "YYYYMM");
      this.queryForm.selectDate = selectDate;
      cardChangePage(this.queryForm).then((res) => {
        this.listLoading = false;

        if (res.code == "000000") {
          this.list = res.pageInfo.list;
          this.total = res.pageInfo.total;
        } else {
          this.$alert("加载列表 : " + res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    cancel(row, index) {
      this.$confirm("此操作将作废这张单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses",
        type: "warning",
      })
        .then(() => {
          console.log(123);
          row.state = 1;
          cardChangeCancel({ id: row.id }).then((res) => {
            if (res.code == "000000") {
              this.$message.success({
                message: res.message,
              });
              this.getData();
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    primary(item, index) {
      this.$refs.detail.show(item);
    },
    //明细返回方法
    detailData(v) {
      this.getData();
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getData();
    },
  },
  mounted() {
    // this.getData()
  },
  created() {},
};
</script>

<style>
.raisediv {
  width: 120px;
}
</style>
