<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="车牌号" prop="carNum">
        <el-input
          v-model="queryParams.carNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检测类型" prop="goodsTitle">
        <el-input
          v-model="queryParams.goodsTitle"
          placeholder="请输入检测类型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户来源" prop="customerSource">
        <el-select v-model="queryParams.customerSource" placeholder="请选择客户来源">
          <el-option
            v-for="dict in customerData"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
          <template slot-scope="scope">
            <el-select
              v-model="queryParams.payType"
              placeholder="支付方式"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.pay_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </template>
      </el-form-item>
      <el-form-item label="检测时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.jcTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="角色" prop="status">
        <el-select
          v-model="queryParams.roleId"
          placeholder="角色"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.inspection_use_role.slice(0,3)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
      >录入</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
      >导出</el-button>
    </el-col>
      <div style="margin-left: 72%;font-weight: bold">
      <span>
         公示价格汇总：{{moneyData.goodsPriceSum/100}} 元
      </span>
        <span style="margin-left: 3%">
      实付金额汇总：{{moneyData.payMoneySum/100}} 元
      </span>

      </div>
    </el-row>


    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="车牌号" align="center" prop="carNum" />
      <el-table-column label="检测类型" align="center" prop="goodsTitle" />
      <el-table-column label="检测项目" align="center" prop="skuName" />
      <el-table-column label="公示价格" align="center" prop="realPayMoney">
        <template slot-scope="scope">
          <span>{{scope.row.goodsPrice/100}}</span>
        </template>
      </el-table-column>
      <el-table-column label="实收金额" align="center" prop="realPayMoney">
        <template slot-scope="scope">
          <span>{{scope.row.realPayMoney/100}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款时间" align="center" prop="payTime"/>
<!--      <el-table-column label="客户" align="center" prop="buyName" />-->
      <el-table-column label="客户手机号" align="center" prop="buyPhone" />
<!--      <el-table-column label="接待员" align="center" prop="workerName"/>-->
      <el-table-column label="接待员手机号" align="center" prop="workerPhone"/>
      <el-table-column label="客户来源" align="center" prop="customerSource">
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="payType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="startTime"/>
      <el-table-column label="结束时间" align="center" prop="endTime"/>
      <el-table-column label="检测结果" align="center" prop="isPass">
        <template slot-scope="scope">
        <span v-if="scope.row.isPass =='0'">不合格</span>
          <span v-else-if="scope.row.isPass =='1'">合格</span>
          <span v-else>进行中</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="watchWork(scope.row)"
          >打印</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="xinWork(scope.row)"
          >结算</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status&&scope.row.status == 1&&scope.row.isPass&&scope.row.isPass ==1&&scope.row.makeCert!=1"

            @click="zhizheng(scope.row)"
          >制证</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status&&scope.row.status == 0"
            @click="jieshu(scope.row)"
          >完工</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改道路救援模块对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>

     <div v-html="htmlStr" id ="printMe"> </div>

      <el-button type="primary" style="margin-left: 90%;margin-top:20px " v-print="'#printMe'" size="small">打印</el-button>

    </el-dialog>
<!--  弹窗  -->
    <el-dialog :title="title" :visible.sync="openhe" width="600px" append-to-body>
      <el-form ref="form" :model="offline" :rules="rules" label-width="120px">

       <div style="box-sizing: border-box;padding-left: 120px;margin: 10px auto">
         <el-select v-model="isPass" placeholder="是否合格">
           <el-option
             v-for="item in optionss"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
       </div>
      <div v-if="isPass == 0" style="box-sizing: border-box;padding-left: 120px;margin: 10px auto">
        <el-select v-model="isRetrial" placeholder="重审/退办">
          <el-option
            v-for="item in optionsss"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>


      <div style="margin-top: 10px">
        <el-form-item label="说明" >
          <el-input type="text" v-model="remark"></el-input>
        </el-form-item>
      </div>
        <el-button type="primary" @click="jieshutij()">确定</el-button>
      </el-form>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openxin" width="800px" append-to-body>
      <el-form ref="form" :model="offline" :rules="rules" label-width="120px">
      <el-form-item label="商品价格" >
        <span>{{goodsPrice/100}}</span>
      </el-form-item>
      <el-form-item label="优惠金额" >
        <el-input-number :min="0" @input="jisuan" :max="goodsPrice/100" type="text" v-model="reduceMoney"></el-input-number>
      </el-form-item>
      <el-form-item label="实付金额" >
        <el-input-number type="text" v-model="payMoney"></el-input-number>
      </el-form-item>
      <el-form-item label="付款方式" >
<!--        <el-input type="text" v-model="receivablesAccount"></el-input>-->
        <el-select v-model="payType" placeholder="请选择付款方式">
          <el-option
            v-for="dict in dict.type.pay_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款账号" >
        <el-select  v-model="receivablesAccount" placeholder="请选择收款账号">
        <el-option
          v-for="item in BankAccountList"
          :key="item.key"
          :label="item.key"

        ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input type="text" v-model="payRemark"></el-input>
      </el-form-item>
        <el-button type="primary" @click="tijiao()">确 定</el-button>
      </el-form>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="addOpen" width="600px" append-to-body>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="客户姓名" >
          <el-input type="text" v-model="form.buyName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" >
          <el-input type="text" v-model="form.buyPhone"></el-input>
        </el-form-item>
        <el-form-item label="号牌号码" >
          <el-input type="text" v-model="form.carNum"></el-input>
        </el-form-item>
        <el-form-item label="品牌型号" >
          <el-input type="text" v-model="form.carModel"></el-input>
        </el-form-item>
        <el-form-item label="车辆识别代号" >
          <el-input type="text" v-model="form.carIdNo"></el-input>
        </el-form-item>
        <el-form-item label="住址" >
          <el-input type="text" v-model="form.userAddress"></el-input>
        </el-form-item>
        <el-form-item label="单位" >
          <el-input type="text" v-model="form.unitName"></el-input>
        </el-form-item>
        <el-form-item label="使用性质" >

          <el-select v-model="form.carNature" placeholder="请选择使用性质">
            <el-option
              v-for="dict in dict.type.car_use_nature"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择客户来源" >
          <el-select v-model="form.customerSource" placeholder="请选择客户来源">
            <el-option
              v-for="dict in customerData"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择商品" >
          <el-cascader
            v-model="form.skuId"
            :options="options"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="新旧车" >
          <el-select v-model="form.carStatus" placeholder="请选择客户来源">
            <el-option
              v-for="dict in dict.type.car_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listWorkOrder,workOrderData,listGoods,addWorkInfo,getWorker,shopInfo,settleAccounts,
    workOrderView,inspectionDetail,offlineCharging,
    getBankAccountList,makeCertOk,stopInspection,updateWorkInfo,delWorkInfo} from "./api/workOrder";
  import { getCustomerSource } from "./api/index";
  import print from 'vue-print-nb'
  import moment from 'moment';
  import request from "@/utils/request";

  export default {
    name: "Info",
    dicts: ['customer_source','pay_type','car_status','car_use_nature','inspection_use_role'],
    directives: {
      print
    },
    data() {
      return {
        moneyData:{
          payMoneySum:0,
          goodsPriceSum:0
        },
        isPass:1,
        isRetrial:'',
        remark:'',
        optionss: [{
          value: '1',
          label: '合格'
        }, {
          value: '0',
          label: '不合格'
        }],
        optionsss: [{
          value: '1',
          label: '重审'
        }, {
          value: '0',
          label: '退办理'
        }],

        goodsPrice:0,
        reduceMoney:'',
        payMoney:'',
        payType:'',
        receivablesAccount:'',
        payRemark:'',
        inspectionId:'',
        size:'',
        workId:'',
        workerList:[],
        value: '',
        options:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        customerData:[],
        BankAccountList:[],
        // 总条数
        total: 0,
        // 道路救援模块表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        addOpen:false,
        // 是否显示弹出层
        open: false,
        openxin:false,
        openhe:false,
        htmlStr:null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          connectionName: null,
          isAppointment: null,
          rescueType: null,
          feeType: null,
          carBrand: null,
          destinationInfo: null,
          rescueStatus: null,
          rescueAmount: null,
        },
        // 表单参数
        form: {},
        offline:{},
        // 表单校验
        rules: {
          connectionName: [
            { required: true, message: "联系人名称不能为空", trigger: "blur" }
          ],
          connectionPhone: [
            { required: true, message: "联系人手机号不能为空", trigger: "blur" }
          ],
          licenseNum: [
            { required: true, message: "车牌号不能为空", trigger: "blur" }
          ],
          isAppointment: [
            { required: true, message: "是否为预约单不能为空", trigger: "change" }
          ],
          rescueType: [
            { required: true, message: "救援类型 1拖车2送油3搭电4换台5扣车不能为空", trigger: "change" }
          ],
          carType: [
            { required: true, message: "车辆类型  大中小不能为空", trigger: "change" }
          ],
          rescuePosition: [
            { required: true, message: "救援地点 详细描述不能为空", trigger: "blur" }
          ],
          feeType: [
            { required: true, message: "收费类型不能为空", trigger: "change" }
          ],
        }
      };
    },
    created() {
      this.dict = {type:{}}
      for (let i = 0; i < this.$options.dicts.length; i++) {
        request({
          url: '/rescue/dict/data/type/'+this.$options.dicts[i],
          method: 'get'
        }).then(res=>{
          this.$set(this.dict.type,this.$options.dicts[i],res.data)
        })
      }
     this.getpid()
      this.customerSource();
    },
    methods: {
      jieshutij(){
        let data = {
          id:this.inspectionId,
          isPass:this.isPass,
          isRetrial:this.isRetrial,
          remark:this.remark
        }
        stopInspection(data).then(res=>{
          console.log(res)
          this.$message.success("操作成功")
          this.openhe = false
          this.getList()
        })
      },
      jieshu(row){

        this.inspectionId = row.id
        this.isPass="",
          this.isRetrial="",
          this.remark="",
        this.openhe = true
      },
      zhizheng(row){
        console.log(row)
        let data = {
          inspectionId: row.id
        }
        makeCertOk(data).then(res=>{

          this.$message.success("操作成功")
          this.getList()
        })
      },
      jisuan(){
        if(this.reduceMoney>(this.goodsPrice/100)){
          this.reduceMoney = this.goodsPrice/100
        }
        this.payMoney =	(this.goodsPrice/100)- this.reduceMoney
      },
      tijiao(){
        let data = {
          reduceMoney:this.reduceMoney?this.reduceMoney*100:0,
          payMoney:this.payMoney*100,
          payType:this.payType,
          receivablesAccount:this.receivablesAccount,
          payRemark:this.payRemark,
          inspectionId:this.inspectionId,
        }
        offlineCharging(data).then(res=>{
          this.openxin = false
          this.$message.success("结算成功")
          this.getList()
        })

      },

      settleAccounts(id){
        settleAccounts(id).then(res=>{
          if (res.code == 200){
            this.$message.success("清算成功")
            this.getList()
          }
        })
      },
      customerSource(){
        getCustomerSource().then(res=>{
          this.customerData  = res.data
        })
      },
      watchWork(row){
        workOrderView(row.id).then(res=>{
        this.htmlStr = res.data
        })
      this.open = true
        this.form = row
        this.open = true
      },
      xinWork(row){
        this.inspectionId = row.id
        this.reduceMoney=0,
         this.payMoney=null,
         this.payType=null,
          this.receivablesAccount=null,
          this.payRemark=null,
        inspectionDetail(row.id).then(res=>{
          this.offline = res.data
          this.goodsPrice = res.data.goodsPrice
          console.log(res)
        })
        this.openxin = true
      },

      //获取pid
      getpid(){
        shopInfo().then(res=>{
          this.partnerId = res.data.partnerId
          this.getList();

        })
      },
      handleChanges(e){

        console.log('执行了查询',e)
      },
      handleChange(e){
        console.log(e)
      },
      /** 查询道路救援模块列表 */
      getList() {
        this.loading = true;
        console.log(this.queryParams.jcTime)
        if (this.queryParams.jcTime){
          this.queryParams.startTime = this.queryParams.jcTime[0]
          this.queryParams.endTime = this.queryParams.jcTime[1]
        }
        listWorkOrder(this.queryParams).then(response => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        workOrderData(this.queryParams).then(response => {
          this.moneyData = response.data
        });
        let data = {
          partnerId:this.partnerId,
          workName:this.value,
          pageNum:1,
          pageSize:100,
        }
        getWorker(data).then(res =>{
          console.log(res)
          this.workerList =  res.rows
        })
        getBankAccountList().then(res=>{
          res.data.forEach(it=>{
            let temp={}
            temp.key = it.remark+it.dictLabel
            this.BankAccountList.push(temp)
          })
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.addOpen = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          connectionName: null,
          connectionPhone: null,
          licenseNum: null,
          isAppointment: null,
          rescueTime: null,
          rescueType: null,
          carType: null,
          rescuePosition: null,
          rescueLongitude: null,
          rescueLatitude: null,
          feeType: null,
          carBrand: null,
          destinationInfo: null,
          destinationLongitude: null,
          destinationLatitude: null,
          rescueStatus: null,
          driverId: null,
          rescueAmount: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
        };
        this.resetForm("form");
      },


      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.jcTime = null
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        listGoods().then(res=>{
          res.data.forEach(it=>{
            let temp={}
            temp.value = it.id;
            temp.label = it.title;
            let temp1=[]
            it.skuList.forEach(item=>{
              let temp2={}
              temp2.value = item.id;
              temp2.label = item.skuName;
              temp1.push(temp2)
            })
            temp.children = temp1
            this.options.push(temp)
          })
          console.log(this.options)
        })
        this.reset();
        this.addOpen = true;
        this.title = "工单";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = row
        let skuId = parseInt(row.skuId)
        this.form.skuId = [row.goodsId,skuId]
        console.log( this.form)
        listGoods().then(res=>{
          res.data.forEach(it=>{
            let temp={}
            temp.value = it.id;
            temp.label = it.title;
            let temp1=[]
            it.skuList.forEach(item=>{
              let temp2={}
              temp2.value = item.id;
              temp2.label = item.skuName;
              temp1.push(temp2)
            })
            temp.children = temp1
            this.options.push(temp)
          })
          console.log(this.options)
        })

        this.addOpen = true;
        this.title = "工单";
      },
      /** 提交按钮 */
      submitForm() {
        if ( this.form.id){
          this.updateForm()
        }else {
          this.$refs["form"].validate(valid => {
            if (valid) {
              console.log(this.form.skuId[1])
              this.form.skuId = this.form.skuId[1]
              addWorkInfo(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.addOpen = false;
                this.getList();
              });
            }
          });
        }

      },
      updateForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form.skuId[1])
            this.form.skuId = this.form.skuId[1]
            updateWorkInfo(this.form).then(response => {
              this.$modal.msgSuccess("成功");
              this.addOpen = false;
              this.getList();
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除？').then(function() {
          return delWorkInfo(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('/system/inspectionMallPartners/exportWorkOrder', {
          ...this.queryParams
        }, `info_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style media="print">
  @page {size: auto; /* auto is the initial value */margin: 3mm; /* this affects the margin in the printer settings */
  }
  .w-box{
    width: 750px;
    margin: 10px auto;
    border: 2px solid #8799a3;
    border-radius:4px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 22px;
    font-weight: bold;

  }
  .box-dis{
    width: 100%;
    display: flex;
    margin: 25px 0px;
    justify-content: space-between;

  }
  .ws-box{
    width: 50%;
    display: flex;
    align-items: center;
  }
  .w-left{
    width: 40%;
  }
  .w-rghit{
    width: 60%;
  }
  .dazi{
    font-size: 22px;
    font-weight: bold;
  }
</style>
