<template>
  <div v-loading="loading" style="padding: 20px">
    <div v-if="role=='2'" class="qs_search" style="margin-bottom: 10px">
      当前支付方式：{{pay_type}}
      <el-button size="small"  @click="show_config" type="primary">结算渠道配置</el-button>
      <div class="flex_1" />
    </div>
    <div v-if="role=='2'" class="qs_search" style="margin-bottom: 10px">
      <span >待支付金额：{{payMoney}}元</span>
    </div>

    <div class="qs_search" style="margin-bottom: 10px">
      <el-tag
        v-for="v in status"
        :key="v.id"
        :type="v.id===search.status?'success':'info'"
        @click="getData_(v.id)"
      >{{ v.name }}
      </el-tag>
      <el-switch
        v-if="search.status==0"
        v-model="search.is_sx_js"
        @change="getData_(0)"
        active-text="结算订单">
      </el-switch>
      <el-button size="small"  @click="export_data" type="primary">导出订单</el-button>
      <div class="flex_1" />
    </div>

    <div style="width: 100%">
      <el-table row-key="id" :data="list">
        <el-table-column prop="order_no" fixed width="170px" label="订单编号">
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="show_pub_log(scope.row.id)">{{scope.row.order_no}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" fixed width="160px" label="用户UID">
          <template slot-scope="scope">
            <a style="color: #006eff" target="_blank" :href="scope.row.user_info.link">{{scope.row.user_info.realname}}（{{scope.row.uid}}）</a>
          </template>
        </el-table-column>
        <el-table-column prop="money" width="140px" label="应付金额">
          <template slot-scope="scope">
            <span>{{scope.row.y_money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_income" width="140px" label="实付金额">
          <template slot-scope="scope">
            <span>{{scope.row.sf_money}}</span>
            <br/>
            <a v-if="scope.row.user_invoice.id" target="_blank" :href="scope.row.user_invoice.file">查看发票</a>
            <span v-if="scope.row.user_invoice.order_num>0" @click="show_user_settlement(scope.row.user_invoice)" style="color: red;cursor: pointer;"> <br/>关联了{{scope.row.user_invoice.order_num}}个订单</span>
          </template>
        </el-table-column>
        <el-table-column width="400px" prop="is_income" label="收款账户">
          <template slot-scope="scope">
            <div v-if="scope.row.account.account_name">
              收款姓名：{{scope.row.account.account_name}}<br/>
              收款账号：{{scope.row.account.card_number}}<br/>
              银行信息：{{scope.row.account.bank_name}}<br/>
            </div>
            <div v-if="!scope.row.account.account_name">
              收款姓名：************<br/>
              收款账号：************，*******************<br/>
              银行支行：************<br/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" width="100px" label="订单状态">
          <template slot-scope="scope">
            {{scope.row.status_text}}
          </template>
        </el-table-column>
        <el-table-column prop="is_income" show-overflow-tooltip label="系统备注">
          <template slot-scope="scope">
            {{scope.row.memo?scope.row.memo:"-"}}
          </template>
        </el-table-column>
        <el-table-column prop="is_income" width="150px" label="结算服务费">
          <template slot-scope="scope">
            <span>{{scope.row.js_moeny}}（{{scope.row.js_rate}}）</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" width="100px" label="发票">
          <template slot-scope="scope">
            {{scope.row.invoice_type_obj.name}}
          </template>
        </el-table-column>
        <el-table-column prop="txtime" width="160px" label="提现时间"></el-table-column>
        <el-table-column prop="paytime"  width="160px" label="到账时间"></el-table-column>
        <el-table-column prop="status" width="100px" label="关联项目">
          <template slot-scope="scope">
            <a v-if="scope.row.link" :href="scope.row.link" style="color: #006eff" target="_blank">{{scope.row.title}}</a>
            <span v-if="!scope.row.link">--</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" width="100px" label="备注">
          <template slot-scope="scope">
            <el-button type="text"  size="small"  @click="add_memo(scope.row.id,'添加备注')">添加备注</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" min-width="200px" prop="uid" label="操作">
          <template  slot-scope="scope">
            <el-button type="primary"  size="small"  v-if="scope.row.status==2  && scope.row.invoice_type!=3" @click="confirm_status(scope.row.id,'是否确认已核对？',3)">审核通过</el-button>
            <el-button type="primary"  size="small"  v-if="scope.row.status==2  && scope.row.invoice_type!=3" @click="confirm_refuse(scope.row.id)">驳回订单</el-button>
            <el-button type="primary"  size="small"  v-if="scope.row.status==4 && role=='1' && scope.row.invoice_type!=3" @click="confirm_status(scope.row.id,'是否确认制单？',5)">确认制单</el-button>
            <el-button type="danger" size="small" v-if="scope.row.status==5 && role=='1' && scope.row.invoice_type!=3" @click="confirm_status(scope.row.id,'是否确认打款？',6)">确认打款</el-button>
            <el-button type="primary"  size="small"  v-if="role=='2' && (scope.row.status==3  || scope.row.status==7)" @click="confirm_js(scope.row.id,'是否确认付款？')">确认付款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      style="margin-top: 10px"
      layout="total,prev, pager, next"
      :current-page="search.page"
      @current-change="page_event"
      :page-size="search.pagesize"
      :total="search.total">
    </el-pagination>

    <pub_log v-if="drawer_obj.pub_log" :back="this" :pro="drawer_obj.id" action="user_settlement"></pub_log>
    <user_settlement v-if="drawer_obj.user_settlement" :fp_info="drawer_obj.obj" :back="this" :pro="drawer_obj.id"></user_settlement>
    <config v-if="drawer_obj.config" :back="this" :pro="drawer_obj.id"></config>
  </div>
</template>

<script>
  import config from '@/components/drawer/invoice/config';
  import pub_log from '@/components/drawer/pub_log';
  import user_settlement from '@/components/drawer/invoice/user_settlement';
  export default {
    props: {
      status: {},
      role: {},
      invoice_type:{}
    },
    components: {config,pub_log,user_settlement},
    data() {
      return {
        loading: true,
        pay_type:"",
        drawer_obj:{
          user_settlement:false,
          user_invoice_add:false,
          id:0,
          pub_log:false,
          config:false,
          obj:{},
        },
        search: {
          pagesize: 10,
          total: 0,
          status:1,
          name: "",
          invoice_type:[],
          is_sx_js:true
        },
        status:[

        ],
        list: [],
        payMoney:0,
      };
    },
    computed: {},
    watch: {},
    created() {
      this.search.status=this.status;
      this.search.invoice_type=this.invoice_type;
    },
    mounted() {
      this.getList();
      this.get_status();
      this.get_config();
    },
    methods: {
      async export_data()
      {
        this.loading = true;
        this.drawer = false;
        let data=this.search;
        data.act="export";
        let res = await this.$post("/uapi/pub/info/user/user_settlement/admin_list",data);
        this.loading = false;
        if (res.status == 1) {
          window.open(res.data.file)
        }
      },
      show_config()
      {
        this.drawer_obj.id = 0;
        this.drawer_obj.config = true;
      },
      show_pub_log(id)
      {
        this.drawer_obj.id = id;
        this.drawer_obj.pub_log = true;
      },
      show_user_settlement(row)
      {
        this.drawer_obj.obj=row;
        this.drawer_obj.id = row.id;
        this.drawer_obj.user_settlement = true;
      },
      show_user_invoice_add(id)
      {
        this.drawer_obj.id = id;
        this.drawer_obj.user_invoice_add = true;
      },
      manager_space(command,id)
      {
        if(command=='log')
        {
          this.drawer_obj.id=id;
          this.drawer_obj.pub_log=true;
        }
        else if(command=='del')
        {
           this.admin_del(id);
        }
        else if(command=='agree')
        {
          this.admin_agree(id);
        }
        else if(command=='refuse')
        {
          this.admin_refuse(id);
        }
        else if(command=='edit')
        {
          this.show_user_invoice_add(id);
        }
      },
      async getList() {
        this.loading = true;
        this.drawer = false;
        let data=this.search;
        data.act="";
        let res = await this.$post("/uapi/pub/info/user/user_settlement/admin_list", this.search);
        this.loading = false;
        if (res.status == 1) {
          this.list = res.data.list;
          this.search.total = res.data.total;
          this.payMoney=res.data.payMoney;
        }
      },
      async get_config() {
        this.loading = true;
        let res = await this.$post("/uapi/pub/info/user/user_settlement/get_config",{});
        this.loading = false;
        if (res.status == 1) {
          this.pay_type = res.data;
        }
      },
      async get_status() {
        this.loading = true;
        let res = await this.$post("/uapi/pub/info/user/user_settlement/get_status",{act:this.role});
        this.loading = false;
        if (res.status == 1) {
          this.status = res.data.list;
        }
      },
      async confirm_refuse(id) {
        this.$prompt('请输入拒绝的理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async  ({ value }) => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/user/user_settlement/set_status",{id:id,reason:value,status:8});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
            await this.get_status();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      async add_memo(id) {
        this.$prompt('请输入备注信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async  ({ value }) => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/user/user_settlement/add_memo",{id:id,memo:value});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
            await this.get_status();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      async confirm_status(id,msg,status) {
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/user/user_settlement/set_status",{id:id,status:status});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
            await this.get_status();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async confirm_js(id,msg) {
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/user/user_settlement/confirm_js",{id:id});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
            await this.get_status();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async admin_del(id) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true;
          let res =await this.$post("/uapi/pub/info/user/user_invoice/admin_del",{id:id});
          if (res.status == 1) {
            this.$message({
              type: 'success',
              message: '成功!'
            });
            await this.getList();
          }
          this.loading = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      page_event(page) {
        this.search.page = page;
        this.getList();
      },
      getData_(id) {
        this.search.status = id;
        this.search.page=0;
        this.getList();
      },
      search_() {
        this.search.page = 0;
        this.getList();
      },
    }
  };
</script>

<style scoped>
  .el-tag {
    cursor: pointer;
  }
</style>
