<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div class="filter-container">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="订单编号" >
          <el-input v-model="searchForm.order_num" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="供应商名称" >
          <el-input v-model="searchForm.supplier_name" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="类型" >
          <el-select v-model="searchForm.product_type" placeholder="请选择" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="散装" value="type-00"></el-option>
            <el-option label="袋装" value="type-01"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="订单状态" >
          <el-select v-model="searchForm.account_flag" placeholder="请选择" @change="changeAccount" clearable>
            <el-option label="全部"  value=""></el-option>
            <el-option label="待入账" :value="false" ></el-option>
            <el-option label="已入账" :value="true" ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="品种" >
          <el-select v-model="searchForm.variety_num" placeholder="请选择" clearable>
            <el-option v-for="(item, index) in varietyList" 
              :key="index"
              :label="item.data_name" :value="item.data_name" >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <template>
          <div style="display:inline-block;">
            <span class="g66 f700 font-14">入账时间</span>
            <el-date-picker
              v-model="searchForm.start_time"
              :picker-options="pickerOptionsStart"
              type="datetime"
              placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="changeEnd"/>
            <span>~</span>
            <el-date-picker
              v-model="searchForm.end_time"
              :picker-options="pickerOptionsEnd"
              type="datetime"
              placeholder="请选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="changeStart"/>
          </div>
        </template> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="mb-10 f700">
      <span>订单总数：{{total}}</span>
      <span class="ml-40">总数量(吨)：{{ton_sum}}</span>
      <span class="ml-40">订单总额(元)：{{cost_sum}}</span>
    </div>
    <el-table v-loading="listLoading" :data="firmList" border fit highlight-current-row style="width: 99.99%;">
      <el-table-column label="ID" prop="delivery_id" align="center" width="80"></el-table-column>
      <el-table-column label="订单编号" prop="order_num" align="center"></el-table-column>
      <el-table-column label="供应商名称" prop="supplier_name" align="center"></el-table-column>
      <!-- <el-table-column label="客户名称" prop="supplier_man" align="center"></el-table-column>
      <el-table-column label="客户电话" prop="supplier_phone" align="center"></el-table-column> -->
      <el-table-column label="类型" prop="product_type" align="center">
        <template slot-scope="scope">{{getProductType(scope.row.product_type)}}</template>
      </el-table-column>
      <el-table-column label="品种" prop="variety_num" align="center"></el-table-column>
      <el-table-column label="出厂数量(吨)" prop="order_ton" align="center"></el-table-column>
      <el-table-column label="单价(元)" prop="order_fee" align="center"></el-table-column>
      <el-table-column label="总额(元)" prop="sum_fee" align="center"></el-table-column>
      <!-- <el-table-column label="入账时间" prop="account_time" align="center"></el-table-column> -->
      <!-- <el-table-column label="订单状态" prop="account_flag" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.account_flag==false" type="danger">待入账</el-tag>
          <el-tag v-else-if="scope.row.account_flag==true">已入账</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleDetail(scope.row.delivery_id)"> 配送详情 </el-button>
          <!-- <el-button size="mini" type="primary" @click="handleEntry(scope.row)"> 入账 </el-button> -->
        </template>
      </el-table-column>     
    </el-table>
    <!-- 翻页 -->
    <pagination v-show="total>0" 
      :total="total" 
      :page.sync="searchForm.page" 
      :page_len.sync="searchForm.page_len"
      :limit.sync="searchForm.limit" 
      @pagination="fetchData" />
    <!-- 详情弹窗 -->
    <el-dialog title="订单详情" :visible.sync="dialogDetail" center width="1000px" style="margin-top:-60px;">
      <div class="flex">
        <el-form :model="detailDelivery" label-width="120px" >
          <el-form-item label="订单编号：">{{detailDelivery.order_num}}</el-form-item>
          <!-- <el-form-item label="配送司机：">{{detailDelivery.driver_name}}</el-form-item> -->
          <el-form-item label="车牌号：">{{detailDelivery.driver_account}}</el-form-item>
          <el-form-item label="司机电话：">{{detailDelivery.driver_phone}}</el-form-item>
          <el-form-item label="配送时间：">{{detailDelivery.create_time}}</el-form-item>
          <el-form-item label="配送产品：">{{getProductType(detailDelivery.product_type)}}</el-form-item>
          <el-form-item label="品种编号：">{{detailDelivery.variety_num}}</el-form-item>
          <el-form-item label="出厂数量(吨)：">{{detailDelivery.order_ton}}</el-form-item>
        </el-form>
        <el-form :model="detailDelivery" label-width="230px" >
          <el-form-item label="实收数量(吨)：">{{detailDelivery.over_ton}}</el-form-item>
          <el-form-item label="成本单价：">{{detailDelivery.base_fee}}</el-form-item>
          <el-form-item label="成本总价：">{{detailDelivery.base_sum}}</el-form-item>
          <el-form-item label="销售价：">{{detailDelivery.sale_fee}}</el-form-item>
          <el-form-item label="销售总价：">{{detailDelivery.sale_sum}}</el-form-item>
          <el-form-item label="运费：">{{detailDelivery.post_fee}}</el-form-item>
        </el-form>
        <el-form :model="detailDelivery" label-width="230px" >
          <el-form-item label="返点金额：">{{detailDelivery.return_fee}}</el-form-item>
          <el-form-item label="供应商名称：">{{detailDelivery.supplier_name}}</el-form-item>
          <!-- <el-form-item label="供应商联系人：">{{detailDelivery.supplier_man}}</el-form-item>
          <el-form-item label="供应商电话：">{{detailDelivery.supplier_phone}}</el-form-item>
          <el-form-item label="供应商地址：">{{detailDelivery.supplier_address}}</el-form-item> -->
          <el-form-item label="工地名称：">{{detailDelivery.site_name}}</el-form-item>
          <el-form-item label="工地负责人：">{{detailDelivery.site_man}}</el-form-item>
          <el-form-item label="工地地址：">{{detailDelivery.site_address}}</el-form-item>
          <el-form-item label="负责人电话：">{{detailDelivery.man_phone}}</el-form-item>
        </el-form>
      </div>
      <el-form class="ml-30" :model="detailDelivery" label-width="120px" >
        <el-form-item label="其他回执：">
          <div class="flex">
            <div v-for="(item, index) in detailDelivery.order_receipt" 
              :key="index" :data-img="detailDelivery.order_receipt" 
              @click="showImg($event,index)">
              <img class="poi flex ml-10" style="width:100px;" :src="baseUrl+item"/>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 录入信息弹窗 -->
    <el-dialog title="入账信息" :visible.sync="dialogEntry" center width="400px" @close="closeDialog">
      <el-form :model="entryInfo" label-width="100px" :rules="formRules" ref="postForm" >
        <el-form-item label="应付总额：">{{entryInfo.sum_fee}}</el-form-item>
        <el-form-item label="实付总额：" prop="order_fee">
          <el-input v-model="entryInfo.order_fee" placeholder="请输入实付总额"/>
        </el-form-item>
      </el-form>
      <el-button style="margin-left:140px" type="primary" @click="submitForm">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getData, listSupplierAccept, detailSupplierOrder, saveSupplierOrder } from '@/api/order/index'
import { checkRqInput, checkRqSelect, checkNum } from '@/utils/validate'
import imgDialog from '../../../../components/imgPreview/ImgPreview'
import { baseUrl } from '@/utils/env.js'

export default {
  components: {
    imgDialog
  },
  data() {
    return {
      firmList: [],  // 列表
      total: 0,  // 总数
      ton_sum: 0, // 实收数量
      cost_sum: 0, // 订单总额
      listLoading: true,
      // 搜索相关数据
      searchForm: {
        page: 1,
        page_len: 10,
        // account_flag: ''
      },
      entryInfo: {}, // 录入信息
      dialogEntry: false, // 录入信息弹窗
      dialogDetail: false, // 订单详情弹窗
      detailDelivery: {}, // 订单详情
      varietyList: [], // 品种列表
      // 限制开始时间
      pickerOptionsStart: {},  
      pickerOptionsEnd: {},
      baseUrl,
      // 校验规则
      formRules: {
        order_fee: [ checkRqInput, checkNum ],
      },
    }
  },
  created() {
    this.fetchData()
    this.fetchVariety()
  },
  methods: {
    // 获取品种列表
    fetchVariety() {
      this.$http(getData("data-01"), (res) => {
        this.varietyList = res.data
      })
    },
    // 获取列表
    fetchData(obj={}) {
      if(obj.page) {
        this.searchForm.page = obj.page
        this.searchForm.page_len = obj.page_len
      }
      // this.searchForm.account_flag = this.$route.query.flag=='no'?false:this.searchForm.account_flag;
      this.listLoading = true
      this.$http(listSupplierAccept(this.searchForm), (res) => {
        this.firmList = res.data.result
        this.total = res.data.data_sum
        this.ton_sum = res.data.ton_sum
        this.cost_sum = res.data.cost_sum
        this.listLoading = false
      })
    },
    // 取消状态
    changeAccount() {
      this.$route.query.flag = ""
    },
    // 配送产品
    getProductType(value) {
      return value=="type-00"?"散装":(value=="type-01"?"袋装":"")
    },
    // 配送详情 
    handleDetail(id) {
      this.$http(detailSupplierOrder(id), (res) => {
        this.detailDelivery = res.data
        this.dialogDetail = true
      })
    },
    // 展示图片列表
    showImg(e,msg){
      this.detailDelivery.order_receipt.forEach( (item,index) => {
        if (index == msg) {
          this.curIdx = index
        }
      })
      this.$imgPreview(e,this.curIdx)
    },
    // 结算运费
    handleEntry(row) {
      this.entryInfo.delivery_id = row.delivery_id
      this.entryInfo.sum_fee = row.sum_fee
      this.dialogEntry = true
    },
    // 保存结算运费
    submitForm() {
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          this.$http(saveSupplierOrder(this.entryInfo), res => {
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.fetchData()
            this.dialogEntry = false
          })
        } else {
          return false
        }
      })
    },
    // 结束时间限制开始时间
    changeStart() {
      let self = this
      if (!this.searchForm.end_time) {
        this.pickerOptionsStart = {
          disabledDate: {}
        }
        return
      }
      this.pickerOptionsStart = Object.assign({}, self.pickerOptionsStart, {
        disabledDate(time) {
          return time.getTime() > new Date(self.searchForm.end_time).getTime()
        }
      })
    },
    // 开始时间控制结束时间
    changeEnd() {
      let self = this
      if (!this.searchForm.start_time) {
        this.pickerOptionsEnd = {
          disabledDate: {}
        }
        return
      }
      this.pickerOptionsEnd = Object.assign({}, self.pickerOptionsEnd, {
        disabledDate(time) {
          return time.getTime() < new Date(self.searchForm.start_time).getTime()
        }
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.$refs['postForm'].resetFields();
    },
  }
}
</script>

<style lang='scss' scoped>
  
</style>