<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <template-page
        ref="pageRef"
        v-if="tabIndexShow && activeKey == 'list'"
        :get-list="getList"
        :table-attributes="tableAttributes"
        :table-events="tableEvents"
        :operationColumnWidth="120"
        :options-evens-group="optionsEvensGroup"
        :moreParameters="moreParameters"
        :column-parsing="columnParsing"
        :operation="operation()"
        :exportList="tabIndex == 1 ? exportList1 : exportList2"
      >
        <div slot="moreSearch" style="margin-bottom: 10px">
          <el-radio-group v-model="tabIndex" size="mini" @change="changeType">
            <el-radio-button label="1">汇总</el-radio-button>
            <el-radio-button label="2">明细</el-radio-button>
          </el-radio-group>
        </div>
        <div slot="moreSearch" v-if="tabIndex == 2">
          <el-radio-group v-model="status" size="mini" @change="changeType">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="WAIT">待结算</el-radio-button>
            <el-radio-button label="OVER">已完成</el-radio-button>
          </el-radio-group>
          <br /><br />
        </div>
      </template-page>
      <div v-if="~['detail'].indexOf(activeKey)">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基础信息</span>
          </div>
          <table border="1" style="border-color: #fff" width="100%" align="center" cellspacing="0" cellpadding="10">
            <tr>
              <td class="bold" align="center">网点名称</td>
              <td>{{ formData.websitName }}</td>
              <td class="bold" align="center"></td>
              <td></td>
            </tr>
            <tr>
              <td class="bold" align="center">工单号</td>
              <td>{{ formData.orderId }}</td>
              <td class="bold" align="center">工单品牌</td>
              <td>{{ formData.brand }}</td>
            </tr>
            <tr>
              <td class="bold" align="center">客户姓名</td>
              <td>{{ formData.userName }}</td>
              <td class="bold" align="center">客户电话</td>
              <td>{{ formData.userMobile }}</td>
            </tr>
            <tr>
              <td class="bold" align="center">师傅姓名</td>
              <td>{{ formData.workerName }}</td>
              <td class="bold" align="center">师傅身份证号</td>
              <td>{{ formData.identity }}</td>
            </tr>
            <tr>
              <td class="bold" align="center">师傅联系电话</td>
              <td>{{ formData.workerMobile }}</td>
              <td class="bold" align="center">订单金额</td>
              <td>{{ formData.totalAmount }}</td>
            </tr>
            <tr>
              <td class="bold" align="center">库存类型</td>
              <td>
                {{ formData.settlementType == 'OWN' ? '自有库存' : formData.settlementType == 'OUT' ? '外购库存' : '' }}
              </td>
              <td class="bold" align="center">创建人</td>
              <td>{{ formData.createBy }}</td>
            </tr>
            <tr>
              <td class="bold" align="center">创建时间</td>
              <td>{{ formData.createTime }}</td>
              <td class="bold" align="center">支付状态</td>
              <td>
                {{
                  formData.payStatus == 'CANCEL'
                    ? '取消'
                    : formData.payStatus == 'PAID'
                    ? '已支付'
                    : formData.payStatus == 'WAIT'
                    ? '待支付'
                    : ''
                }}
              </td>
            </tr>
            <tr>
              <td class="bold" align="center">结算人员</td>
              <td>{{ formData.updateBy }}</td>
              <td class="bold" align="center">操作时间</td>
              <td>{{ formData.updateTime }}</td>
            </tr>
          </table>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
          </div>
          <table border="1" style="border-color: #fff" width="100%" align="center" cellspacing="0" cellpadding="10">
            <thead>
              <tr>
                <th class="bold" align="center">名称</th>
                <th class="bold" align="center">收费类型</th>
                <th class="bold" align="center">工单类型</th>
                <th class="bold" align="center">数量</th>
                <th class="bold" align="center">收费标准</th>
                <th class="bold" align="center">订单金额</th>
                <th class="bold" align="center">库存类型</th>
                <th class="bold" align="center">师傅手工费用</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in formData.settlementOrderManualItems" :key="index">
                <td align="center">{{ item.goodsName }}</td>
                <td align="center">
                  {{ item.chargeType == 'ACC' ? '配件物料' : item.chargeType == 'SERV' ? '服务收费' : '辅材物料' }}
                </td>
                <td align="center">{{ formData.saleType | saleTypeFilter }}</td>
                <td align="center">{{ item.num }}</td>
                <td align="center">{{ item.goodsAmount }}</td>
                <td align="center">{{ item.totalAmount }}</td>
                <td align="center">
                  {{ item.settlementType == 'OWN' ? '自有' : item.settlementType == 'OUT' ? '外购' : '' }}
                </td>
                <td align="center">{{ item.manualAmount }}</td>
              </tr>
              <!-- <tr>
								<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
							</tr> -->
              <tr>
                <td align="center">总计</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td align="center">{{ totalAmount }}</td>
                <td></td>
                <td align="center">{{ manualAmount }}</td>
              </tr>
            </tbody>
          </table>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="mini"
            @click="
              formDialog = false
              formData = {}
              data.removeTab()
            "
            >取 消</el-button
          >
          <el-button
            size="mini"
            v-if="formData.status == 'WAIT'"
            type="primary"
            @click="settleAccounts(formData.settlementOrderId, data.removeTab, 2)"
            >确认结算
          </el-button>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import {
  listPageV1,
  listPageV2,
  pageExport1,
  pageExport2,
  getDetail,
  settleAccounts
} from '@/api/auxiliaryFittings/auxiliaryHandworkFee'
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  filters: {
    saleTypeFilter(val) {
      const MAP = {
        1: '零售',
        2: '工程',
        3: '延保',
        4: '工程维保'
      }
      return MAP[val]
    }
  },
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      formDialogType: 0,
      formDialogTitles: ['新增', '编辑', '详情'],
      formDialog: false,
      formData: {},
      status: '',
      totalAmount: 0,
      manualAmount: 0,
      websitAmount: 0,
      commissionAmount: 0,
      tabIndex: 1,
      workerId: '',
      websitId: '',
      tabIndexShow: true,
      formType: 'add',
      formVisible: false
    }
  },
  watch: {
    tabIndex() {
      this.tabIndexShow = false
      this.$nextTick(() => {
        if (this.tabIndex == 1) {
          this.status = ''
          this.workerId = ''
          this.websitId = ''
        }
        this.tabIndexShow = true
      })
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('bulkSettlement', {
              isRole: this.tabIndex == 2,
              click: () => {
                this.batchSettleAccounts()
              }
            })
          ]
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    }
  },
  methods: {
    // 切换状态
    changeType(val) {
      this.workerId = ''
      this.websitId = ''
      this.$refs.pageRef.refreshList()
    },
    // 列表请求函数
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        if (this.status && this.tabIndex == 2) {
          pam.params.push({ param: 'a.status', compare: '=', value: this.status })
        }
        if (this.workerId) {
          pam.params.push(
            { param: 'a.websit_id', compare: '=', value: this.websitId },
            { param: 'a.worker_id', compare: '=', value: this.workerId }
          )
        }
        return this.tabIndex == 1 ? listPageV1(pam) : listPageV2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList1: pageExport1,
    exportList2: pageExport2,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    selectable(row, index) {
      if (this.tabIndex == 2) {
        console.log(row, row.selectMapData)
        return ['WAIT'].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
      }
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    openForm(type, id) {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: type,
        // 唯一标识
        key: type,
        // 页签名称
        label: { detail: '详情' }[type],
        // 打开时事件
        triggerEvent: () => {
          this.formCancel()
          this.$nextTick(() => {
            this.formType = type
            this.formVisible = true
            if (type == 'detail') {
              this.formDialogType = 1
              this.totalAmount = 0
              this.manualAmount = 0
              getDetail({ id }).then(res => {
                Object.assign(this.formData, res.data)
                res.data.settlementOrderManualItems.forEach(item => {
                  this.totalAmount += (item.totalAmount * 100 + this.totalAmount * 100) / 100
                  this.manualAmount = (item.manualAmount * 100 + this.manualAmount * 100) / 100
                })
              })
            }
          })
        },
        // 关闭时事件
        closeEvent: () => {}
      })
    },
    formCancel() {
      this.formVisible = false
      this.$refs?.formRef?.resetFields()
      this.$data.formData = this.$options.data().formData
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        detail: {
          btnType: 'text',
          name: ({ row, index, column }) => {
            return this.tabIndex == 1 ? '查看明细' : '详情'
          },
          click: ({ row, index, column }) => {
            if (this.tabIndex == 1) {
              this.workerId = row.workerId
              this.websitId = row.websitId
              this.tabIndex = 2
              this.$refs.pageRef.refreshList()
            } else {
              this.openForm('detail', row.settlementOrderId)
            }
          }
        },
        settle: {
          btnType: 'text',
          conditions: ({ row, index, column }) => {
            if (this.tabIndex == 1) {
              return row.workerAmount != row.okAmount
            } else {
              return row.status == 'WAIT'
            }
          },
          click: ({ row, index, column }) => {
            if (this.tabIndex == 1) {
              this.status = 'WAIT'
              this.workerId = row.workerId
              this.websitId = row.websitId
              this.tabIndex = 2
              this.$refs.pageRef.refreshList()
            } else {
              this.settleAccounts(row.settlementOrderId)
            }
          }
        }
      })
    },
    batchSettleAccounts() {
      if (this.recordSelected.length == 0) {
        return this.$message.warning('请至少勾选一条数据！')
      }
      this.settleAccounts(
        this.recordSelected
          .map(item => {
            return item.settlementOrderId
          })
          .join(',')
      )
    },
    settleAccounts(id, cancel, type) {
      this.$confirm(`请确认是否提交结算, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        settleAccounts({
          id
        }).then(res => {
          if (res.code == 200) {
            this.$message({ type: 'success', message: `结算成功!` })
            if (type == 2) {
              cancel('list')
            }
            this.$refs.pageRef.refreshList()
            this.formDialog = false
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}

.bold {
  width: 160px;
  font-weight: bold;
  background-color: #f0f0f0;
}
</style>
