<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container"> 
      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入订单编号" />
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入会员手机号码" />
      <el-button v-permission="['GET /admin/aftersale/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- <div class="operator-container">
      <el-button v-permission="['GET /admin/pet/batch-recept']" class="filter-item" type="success" icon="el-icon-info" @click="handleBatchReceptConfirm">批量投保成功</el-button>
      <el-button v-permission="['GET /admin/pet/batch-reject']" class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchReject">批量拒绝</el-button>
    </div> -->

    <el-tabs v-model="tab" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="待投保" name="uncheck" />
      <el-tab-pane label="投保通过" name="pose" />
      <el-tab-pane label="投保未通过" name="reject" />
    </el-tabs>

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" fit highlight-current-row >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column align="center" label="投保人" prop="username" />
      <el-table-column align="center" label="手机号码" prop="mobile" />
      <el-table-column align="center" label="投保人身份证" prop="nid"/>
      <el-table-column align="center" label="邮箱" prop="email" />
      <el-table-column align="center" label="申请时间" prop="createTime" />
       <el-table-column align="center" label="当前订单状态" prop="orderStatus">
        <template slot-scope="scope">
            <el-tag type='warning'>
             {{scope.row.order.orderStatus | orderStatusFilter}}
            </el-tag>
        </template>
       </el-table-column>
     
      <el-table-column align="center" label="投保状态" prop="insStatus">
        <template slot-scope="scope">
          <el-tag :type="typeTag[scope.row.insStatus]">{{  typeof scope.row.insStatus==='undefined'?'未审核': scope.row.insStatus==true?'投保通过':'投保未通过' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="投保备注" prop="insRemark" />
      

      <el-table-column align="center" label="操作" min-width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/pet/detail']" type="primary" size="mini" @click="handleRead(scope.row)">详情</el-button>
          <el-button v-if="typeof scope.row.insStatus === 'undefined'&&(scope.row.order.orderStatus===201||scope.row.order.orderStatus===301||scope.row.order.orderStatus===401||scope.row.order.orderStatus===402)" v-permission="['POST /admin/pet/recept']" type="success" size="mini" @click="handleRecept(scope.row)">投保</el-button> 
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="投保详情" width="900"> 
      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px" />
          <span class="color-danger">当前投保状态：{{ typeof petDetail.insStatus=='undefined'?'未审核': petDetail.insStatus==true?'投保通过':'投保未通过' }}</span>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">投保人</el-col>
            <el-col :span="6" class="table-cell-title">手机号码</el-col>
            <el-col :span="6" class="table-cell-title">身份证号</el-col>
            <el-col :span="6" class="table-cell-title">邮箱</el-col>
          </el-row>
          <el-row> 
            <el-col :span="6" class="table-cell">{{ petDetail.username }}</el-col>
            <el-col :span="6" class="table-cell">{{ petDetail.mobile }}</el-col>
            <el-col :span="6" class="table-cell">{{ petDetail.nid }}</el-col>
            <el-col :span="6" class="table-cell">{{ petDetail.email }}</el-col>
          </el-row> 
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">宠物信息</span>
        </div>  
        <div class="table-layout">
          <el-row>
            <el-col :span="12" class="table-cell-title">宠物照片</el-col>
            <el-col :span="12" class="table-cell-title">宠物合照</el-col> 
          </el-row>
          <el-row>
            <el-col :span="12" class="table-cell" style="height:100px"><img :src="petDetail.imgPet" style="height: 80px"></el-col>
            <el-col :span="12" class="table-cell" style="height:100px"><img :src="petDetail.imgFamily" style="height: 80px"></el-col> 
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell-title">宠物类型</el-col>
            <el-col :span="4" class="table-cell-title">宠物品种</el-col>
            <el-col :span="4" class="table-cell-title">宠物性别</el-col>
            <el-col :span="4" class="table-cell-title">宠物年龄</el-col>
            <el-col :span="4" class="table-cell-title">宠物体重(KG)</el-col>
            <el-col :span="4" class="table-cell-title">宠物毛色</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ petDetail.type }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.breed }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.gender }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.age }} </el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.weight }} </el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.color }} </el-col> 
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell-title">就医城市</el-col>
            <el-col :span="4" class="table-cell-title">养犬登记证号</el-col>
            <el-col :span="4" class="table-cell-title">血统证书号</el-col>
            <el-col :span="4" class="table-cell-title">是否绝育</el-col>
            <el-col :span="4" class="table-cell-title">身份标志符</el-col> 
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ petDetail.province }}{{ petDetail.city }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.idcard }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.blood }}</el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.neuter }} </el-col>
            <el-col :span="4" class="table-cell">{{ petDetail.idNo }} </el-col> 
          </el-row>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">保险信息</span>
        </div>  
        <div class="table-layout">
          <el-row>
            <el-col :span="8" class="table-cell-title">保险期限</el-col>
            <el-col :span="8" class="table-cell-title">保险开始日期</el-col> 
            <el-col :span="8" class="table-cell-title">保险截至日期</el-col> 
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">1年 </el-col>
            <el-col :span="8" class="table-cell">{{ petDetail.startDate }}</el-col> 
            <el-col :span="8" class="table-cell">{{ petDetail.endDate }}</el-col> 
          </el-row>
        </div>

        <div style="float: right;padding-top:10px;padding-bottom: 10px ">
          <el-button type="primary" @click="orderDialogVisible = false">确 认</el-button>
          <!--<el-button type="primary" @click="printOrder">打 印</el-button>-->
        </div>

      </el-card>
    </el-dialog>

      <el-dialog title="宠物险投保" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="保单号" prop="insNo">
          <el-input v-model="dataForm.insNo" />
        </el-form-item>  

        <el-form-item label="状态" prop="insStatus">
          <el-select v-model="dataForm.insStatus" clearable style="width: 200px" class="filter-item" placeholder="请选择状态">
            <el-option v-for="type in deletedOptions" :key="type.value" :label="type.label" :value="type.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="insRemark">
          <el-input v-model="dataForm.insRemark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button> 
        <el-button  type="primary" @click="insureData">确定</el-button>
      </div>
    </el-dialog>



    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>

<script>
import { list,insure } from '@/api/pet' 
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'
import _ from 'lodash'

const statusMap = {
  101: '未付款',
  102: '用户取消',
  103: '系统取消',
  201: '已付款',
  202: '申请退款',
  203: '已退款',
  301: '已发货',
  401: '用户收货',
  402: '系统收货'
}

export default {
  name: 'Aftersale',
  components: { BackToTop, Pagination },
  filters: {
    orderStatusFilter(status) {
      return statusMap[status]
    } 
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      tab: 'all',
      listQuery: {
        page: 1,
        limit: 20, 
        orderSn: '',
        status:'',
        mobile: '',
        sort: 'create_time',
        order: 'desc'
      },
      typeTag: [
        '',
        'success',
        'warning'
      ], 
       dataForm: {
        id: undefined,
        insNo: '',
        insRemark: '',
        insStatus: true  
      }, 
      deletedOptions: [{
        value: false,
        label: '拒绝'
      }, {
        value: true,
        label: '通过'
      }],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        shopNo: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
        shopName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        shopCity: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
        channelId: [{ required: true, message: '渠道不能为空', trigger: 'blur' }]
      },
      multipleSelection: [],
      contentDetail: '',
      contentDialogVisible: false,
      downloadLoading: false,
      orderDialogVisible: false,
      petDetail: { } 
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      list(this.listQuery)
        .then(response => {
            console.info(response.data.data.list)
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch((res) => { 
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    formatTime(time) {
      if (time == null || time === '') {
        return ''
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }, 
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick() {
      if (this.tab === 'all') {
        this.listQuery.status = ''
      } else if (this.tab === 'uncheck') {
        this.listQuery.status = '1'
      } else if (this.tab === 'pose') {
        this.listQuery.status = '2'
      }else if (this.tab === 'reject') {
        this.listQuery.status = '3'
      }
      this.getList()
    },
    handleRecept(row) {
      this.dataForm={
        id: row.id,
        insNo: '',
        insRemark: '',
        insStatus: true  
      },
      this.dialogFormVisible=true
    },
    insureData(){
        insure(this.dataForm).then(res=>{
        this.getList();
        this.dialogFormVisible=false;
         this.$notify.success({
            title: '成功',
            message: '投保成功'
          })

        })

    },
    handleRead(row) {
      this.petDetail=row; 
      this.orderDialogVisible = true
    },
    handleBatchReceptConfirm() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录')
        return
      }
      const ids = []
      _.forEach(this.multipleSelection, function(item) {
        ids.push(item.id)
      })

      this.$confirm('确定批量接受售后订单吗?跨境商品 不建议退单！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleBatchRecept(ids)
      })
    },
    handleBatchRecept(ids) {
      batchReceptAftersale({ ids: ids })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '批量通过操作成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleReject(row) {
      rejectAftersale(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '审核拒绝操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleBatchReject() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条记录')
        return
      }
      const ids = []
      _.forEach(this.multipleSelection, function(item) {
        ids.push(item.id)
      })
      batchRejectAftersale({ ids: ids })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '批量拒绝操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleRefundConfirm(row) {
      this.$confirm('确定为编号' + row.orderSn + '的订单退款吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleRefund(row)
      })
    },
    handleRefund(row) {
      refundAftersale(row)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '退款操作成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '售后编号',
          '订单ID',
          '用户ID',
          '售后类型',
          '退款原因',
          '退款价格',
          '申请时间'
        ]
        const filterVal = [
          'aftersaleSn',
          'orderId',
          'userId',
          'type',
          'reason',
          'amount',
          'addTime'
        ]
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '售后信息')
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .color-danger {
    color: #F56C6C;
    font-size: 18px;
  }
</style>
