<template>
  <div>
    <div class="flex justify-between align-center">
      <div>
        <el-button size="mini" type="primary" v-role="40015002" @click="add(0)">转卡</el-button>
      </div>
      <div>
        <el-button size="mini" v-if="radioRowValueList.state != undefined" type="" @click="detail" v-role="40015001">明细</el-button>
        <el-button size="mini" type="primary" @click="edit(0)" v-role="40015003" v-if="radioRowValueList.state != undefined&&(radioRowValueList.state==0||radioRowValueList.state==2||radioRowValueList.state==4)" plain>修改</el-button>
        <el-button size="mini" type="primary" @click="edit(1)" v-role="40015003" 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-role="40015003" v-if="radioRowValueList.state != undefined&&(radioRowValueList.state==1)" plain>回收</el-button>
        <el-button size="mini" type="primary" @click="edit(3)" v-role="40015004" v-if="radioRowValueList.state != undefined&&(radioRowValueList.state==1)">审核</el-button>
        <el-button size="mini" type="primary" @click="edit(4)" v-role="40015006" 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="50" 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 show-overflow-tooltip align="center" min-width="100" prop="docNum" label="单据号"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="docDate" label="日期"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="80" prop="rechargeMoney" label="转出">
        <el-table-column show-overflow-tooltip align="center" min-width="80" prop="rollOutMemberName" label="会员名称"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" min-width="100" prop="rollOutMobilePhone" label="手机号码"></el-table-column>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="80" prop="rechargeMoney" label="转入">
        <el-table-column show-overflow-tooltip align="center" min-width="80" prop="rollInMemberName" label="会员名称"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" min-width="100" prop="rollInMobilePhone" label="手机号码"></el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="inputBy" :show-overflow-tooltip="true" label="创建人" min-width="80"></el-table-column>
      <el-table-column align="center" prop="inputDate" :show-overflow-tooltip="true" label="创建时间" min-width="100"></el-table-column>
      <el-table-column align="center" prop="updateBy" :show-overflow-tooltip="true" label="修改人" min-width="80"></el-table-column>
      <el-table-column align="center" prop="updateDate" :show-overflow-tooltip="true" label="修改时间" min-width="100"></el-table-column>
      <el-table-column align="center" prop="auditBy" :show-overflow-tooltip="true" label="审核人" min-width="80"></el-table-column>
      <el-table-column align="center" prop="auditDate" :show-overflow-tooltip="true" label="审核时间" min-width="100"></el-table-column>
    </el-table>
    <div class="block margin-top-xs">
      <!-- 分页组件 -->
      <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>
    <edit ref="edit" @editData="editData"></edit>
    <detail ref="detail" @detailData="detailData"></detail>
  </div>
</template>

<script>
import edit from "./components/edit.vue";
import detail from "./components/detail.vue";
import {
  stateTurnMembershipCardNew,
  turnMembershipCardPage,
} from "@/api/storeManage.js";
export default {
  components: { edit, detail },
  data() {
    return {
      form: {}, //主对象
      listLoading: false, //list加载提示开启动画
      elementLoadingText: "加载中...", //list加载提示文字
      list: [], //主数组
      queryForm: {
        //查询对象
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, //分页总条数
      radioRowValue: null, //选择列表值
      radioRowValueList: {}, //选择列表对象
    };
  },
  methods: {
    //点击选中
    rowClick(row) {
      this.radioRowValue = row.id;
      this.radioRowValueList = row;
    },
    //添加转卡转疗程
    add(type) {
      this.$refs.edit.show("添加", type);
    },
    //送审 回收 审核 反审核方法
    edit(number) {
      if (number == -1) {
        this.$refs.edit.show("添加");
      } else if (number == 0) {
        this.$refs.edit.show(this.radioRowValueList);
      } else {
        let form = { id: this.radioRowValueList.id, state: number };
        stateTurnMembershipCardNew(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, this.queryForm);
    },
    //修改返回方法
    editData(v) {
      this.getData();
    },
    //明细返回方法
    detailData(v) {
      this.getData();
    },
    //列表数组双击方法
    rowdbClick(row) {
      this.$refs.detail.show(row);
    },
    //分页方法
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.getData();
      //console.log(val);
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getData();
      //console.log(val);
    },
    //获取数据
    async getData() {
      this.listLoading = true;
      turnMembershipCardPage(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) => {},
          });
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
</style>
