<template>
  <div class="detail">

    <!--    <div class="header">-->
    <!--      <h1>详情</h1>-->
    <!--    </div>-->
    <a-descriptions size="small" :title="pageOptions.title" bordered>
      <a-descriptions-item label="员工姓名">

        {{ staff_detail.name }}
      </a-descriptions-item>
      <a-descriptions-item label="员工工号">
        {{ staff_detail.code }}
      </a-descriptions-item>
      <a-descriptions-item label="员工电话">
        {{ staff_detail.phone }}
      </a-descriptions-item>
      <a-descriptions-item label="运输总公里数">
        {{ data.transport_mileage }}
      </a-descriptions-item>
      <a-descriptions-item label="本月份总公里数">
        {{ data.month_mileage }}
      </a-descriptions-item>
      <a-descriptions-item label="工资结余">
        {{ data.wages_balance }} 元
      </a-descriptions-item>
    </a-descriptions>
    <div class="amount">
      <h2>
        修改结余
      </h2>
      <li>
        <span>操作金额：</span>
        <a-input id="inputNumber" style="width: 200px;margin-right: 10px;" prefix="￥" suffix="RMB" v-model="amount"
          :min="1" :max="1000000000" placeholder="请输入要操作的金额" />
      </li>
      <li>
        <span>操作备注：</span>
        <a-textarea v-model="remark" placeholder="请输入要操作的备注" :auto-size="{ minRows: 3, maxRows: 5 }"
          style="width: 200px;margin-right: 10px;" />
      </li>
      <li>

        <div class="btns" style="z-index:99999;">
          <!-- 增加结余按钮 -->
          <a-popconfirm title="是否增加结余？" ok-text="确认" cancel-text="取消" @confirm="addBalance" @cancel="cancel"
          autoAdjustOverflow="true"
          >
            <a-button class="btn-add-balance" type="primary">增加结余</a-button>
          </a-popconfirm>
          <!-- 减少结余按钮 -->
          <a-popconfirm title="是否减少结余？" ok-text="确认" cancel-text="取消" @confirm="reduceBalance" @cancel="cancel"
          
          autoAdjustOverflow="true"
          >
            <a-button class="btn-reduce-balance" type="danger"> 减少结余</a-button>
          </a-popconfirm>

        </div>
      </li>
    </div>

    <!-- 结余日志列表 -->
    <div class="balance-log">
      <h2>
        结余日志 
      </h2>

      <ZkTableList ref="ZkTableList" :ListUrl="this.DriverWagesGiornaleLogSearch" :ListUrlData="this.zkSelectData"
        :Columns="this.columns" :ListFieldName="this.zkSelectDataFieldName" :dataId="dataId">
      </ZkTableList>

    </div>

  </div>
</template>
<script>
import BASE_URL from '@/services/Middle/transport/DriverWages/api.js';
import ZkTableList from './zkTableList.vue'
// import ZkTable from "@/components/zk/zkTable.vue";

export default {
  components: {
    ZkTableList
  },
  props: {
    dataId: {
    },
    pageOptions: {
      type: Object
    },
    ApiUrl: {
      type: String
    },
    ApiData: {
      type: Object
    },

  },
  data() {
    return {

      DriverWagesSurplusAdd: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/surplus/add`, // 增加司机结余
      DriverWagesSurplusReduce: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/surplus/reduce`, // 减少司机结余        DriverWagesSurplusLogList: `${BASE_URL.BASE_URL}/Custom/v1/balance/log/list`, // 客户结余日志列表
      DriverWagesGiornaleLogList: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/list`, // 司机工资结余日志列表
      DriverWagesGiornaleLogSearch: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/search`, // 司机工资结余日志搜索
      DriverWagesGiornaleLogDetail: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/detail`, // 司机工资结余日志详情
      DriverWagesGiornaleLogCreate: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/create`, // 创建司机工资结余日志
      DriverWagesGiornaleLogUpdate: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/update`, // 更新司机工资结余日志
      DriverWagesGiornaleLogDelete: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/detele`, // 删除司机工资结余日志
      DriverWagesGiornaleLogBatchDelete: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/batchDelete`, // 批量删除司机工资结余日志
      DriverWagesGiornaleLogBatchUpdate: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/batchUpdate`, // 批量更新司机工资结余日志
      DriverWagesGiornaleLogBatchCreate: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/batchCreate`, // 批量创建司机工资结余日志
      DriverWagesGiornaleLogBatchHandle: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/giornale/log/batchHandle`, // 批量处理司机工资结余日志
      zkSelectData: {
        page: 1,
        end_time: 0,
        start_time: 0,
        search_rules: [
        ],
        order_bys: [
        ],
        limit: 50
      },
      zkSelectDataFieldName: "DriverWagesGiornaleLog",
      // 表格列配置
      columns: [


        // =============================== 表格列 自动生成 Start ===============================

        // { type: 'checkbox', width: 50 }, // 多选框
        { type: 'seq', width: 30 }, // 序号


        // =============================== 表格列 自动生成 Start ===============================


        { field: 'code', sortable: true, title: '编码', width: 120 }, // 编码
        // { field: 'staff_uid', sortable: true, title: '员工uid', width: 250 }, // 员工uid
        { field: 'truck_name', sortable: true, title: '车辆名称', width: 120 }, // 车辆名称
        { field: 'truck_number', sortable: true, title: '车牌号', width: 120 }, // 车牌号
        { field: 'balance_type', sortable: true, title: '结余类型', width: 100 }, // 结余类型:1增加，2减少
        { field: 'balance_amount', sortable: true, title: '修改金额', width: 120 }, // 修改金额
        { field: 'total_balance', sortable: true, title: '总结余金额', width: 120 }, // 总结余金额
        { field: 'remark', sortable: true, title: '备注', width: "auto" }, // 备注

        {
          field: 'create_time',
          formatter: 'formatDateTime',
          width: 160,
          sortable: true,
          title: '时间',
          showHeaderOverflow: true
        }, // 创建时间


        // =============================== 表格列 自动生成 Start ===============================

        // =============================== 表格列 自动生成 Start ===============================

      ],
      amount: 0,
      remark: "",
      data: {

      },
      staff_detail: {
      },
    }
  },
  created() {
    this.initDetailData();
  },
  filters: {
    formatDate: function (value) {
      if (value) {
        // 时间戳转日期格式格式化日期时间
        return new Date(value).toLocaleString().replace(/:\d{1,2}$/, ' ');
      } else {
        return "";
      }
    },
    // 格式化状态
    formatStatus: function (value) {
      if (value === 1) {
        return "正常";

        // return "success";
      } else if (value === 0) {
        return "停用";
        // return "error";
      } else {
        return "未知";
        // return "warning";
      }
    },
  },
  methods: {
    initDetailData() {
      // console.log("this.pageOptions.FieldName:", this.pageOptions.FieldName)
      // console.log("this.pageOptions.ApiUrl:", this.pageOptions.ApiUrl);
      // console.log("this.pageOptions.ApiData:", this.pageOptions.ApiData);

      // this.dataId 转换为bigint
      // 如果this.dataId是对象，则需要转换为数字

      this.$zk.post({
        url: this.pageOptions.ApiUrl,
        data: this.pageOptions.ApiData,


        loading: "加载中...",
        useBigInt: true,
        config: {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      }).then(a => {
        console.log("a", a)
        console.log("this.pageOptions.ApiUrl", this.pageOptions.ApiUrl)
        this.data = a.data[this.pageOptions.FieldName];
        this.staff_detail = a.data[this.pageOptions.FieldName].staff_detail;
      }).catch((a) => {
        this.$mk.error(a.msg, "aaa");
      });
    },
    addBalance() {
      this.addBalanceApi();
    },
    reduceBalance() {
      this.reduceBalanceApi();
    },

    addBalanceApi() {
      // 转换 this.amount 为数字
      this.amount = Number(this.amount);
      // 如果不为数字
      if (this.amount === undefined || isNaN(this.amount)) {
        this.$mk.error("请输入正确的金额");
        return
      }
      if (this.amount <= 0) {
        this.$mk.error("请输入正确的金额");
        return
      }
      // 调用增加结余接口
      this.$zk.post({
        url: this.DriverWagesSurplusAdd,
        data: {
          staff_uid: this.staff_detail.id,
          add_balance: this.amount,
          remark: this.remark
        },
        loading: "加载中...",
        useBigInt: true,
        config: {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      }).then(a => {
        console.log("a", a);
        // 成功提示 刷新页面
        this.$mk.success("增加结余成功");
        // 刷新页面
        this.initDetailData() // 刷新
        // 刷新列表
        this.$refs.ZkTableList.refresh()
      }).catch((a) => {
        this.$mk.error(a.msg, "aaa");
      });
    },
    reduceBalanceApi() {
      // 转换 this.amount 为数字
      this.amount = Number(this.amount);
      // 如果不为数字
      if (this.amount === undefined || isNaN(this.amount)) {
        this.$mk.error("请输入正确的金额");
        return
      }
      if (this.amount <= 0) {
        this.$mk.error("请输入正确的金额");
        return
      }
      // 调用减少结余接口
      this.$zk.post({
        url: this.DriverWagesSurplusReduce,
        data: {

          staff_uid: this.staff_detail.id,
          reduce_balance: this.amount,
          remark: this.remark

        },
        loading: "加载中...",
        useBigInt: true,
        config: {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      }).then(a => {
        console.log("a", a);
        // 成功提示 刷新页面
        this.$mk.success("减少结余成功");
        // 刷新页面
        this.initDetailData() // 刷新
        // 刷新列表
        this.$refs.ZkTableList.refresh()

      }).catch((a) => {
        this.$mk.error(a.msg, "aaa");
      });

    },

    cancel() {
      console.log('cancel');
    },
    confirm() {
      console.log('confirm');
    }
  },


}
</script>
<style scoped lang="less">
.detail {
  margin: 10px;

}

.btns {

  margin-top: 10px;

  .btn-add-balance {}

  .btn-reduce-balance {
    margin-left: 10px;
  }
}

.amount {
  margin-top: 20px;

  li {
    margin-top: 10px;
    list-style: none;

    span {
      display: inline-block;
      width: 80px;
    }
  }

}

.balance-log {
  margin-top: 20px;
  height: 600px;
}
</style>