<template>
  <div class="app-container">
    <div v-show="visible">
      <div class="tab-header webtop">
        <div>销售订单管理</div>
        <div>
          <el-button type="primary" size="small" @click="handleCreate()">新增</el-button>
          <el-button type="danger" size="small" @click="handleDelete()">删除</el-button>
          <!-- <el-button type="primary" size="small" :disabled="isableSub" @click="handleSubmit()">提交</el-button> -->
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="webcon">
        <div class="searchcon">
          <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
          <div v-show="isSearchShow" class="search">
            <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
              <el-form-item label="部门名称" class="searchlist">
                <el-input v-model="listQuery.params.orgName" placeholder="请填写" clearable class="filter-item" />
                <!-- <el-select v-model="listQuery.params.orgName" class="filter-item" clearable placeholder="请选择">
                  <el-option :value="listQuery.params.orgName" style="height: auto">
                    <el-tree ref="tree" :data="treedata" default-expand-all show-checkbox check-strictly node-key="sid" highlight-current :props="defaultProps" @check-change="handleCheckChange" />
                  </el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item label="业务员姓名" class="searchlist">
                <el-input v-model="listQuery.params.staffName" placeholder="" clearable class="filter-item" />
              </el-form-item>
              <el-form-item label="客户名称" class="searchlist">
                <el-input v-model="listQuery.params.customerName" placeholder="" clearable class="filter-item" />
              </el-form-item>
              <el-form-item label="单据日期" class="searchlist">
                <el-date-picker v-model="listQuery.params.createDateStart" class="filter-item-time" type="date"
                  value-format="yyyy-MM-dd" placeholder="请选择" />
                <label>至</label>
                <el-date-picker v-model="listQuery.params.createDateEnd" class="filter-item-time" type="date"
                  value-format="yyyy-MM-dd" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="支付方式" class="searchlist">
                <el-select v-model="listQuery.params.payType" class="filter-item" clearable placeholder="请选择">
                  <el-option v-for="item2 in payTypeList" :key="item2.dictKey" :label="item2.dictValue"
                    :value="item2.dictValue" />
                </el-select>
              </el-form-item>
              <el-form-item label="车型名称" class="searchlist">
                <el-input v-model="listQuery.params.modelName" placeholder="" clearable class="filter-item" />
              </el-form-item>
              <div class="searchbtns">
                <el-button type="primary" @click="handleFilter">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
              </div>
            </el-form>
          </div>
        </div>
        <div class="listtop">
          <div class="tit">销售订单列表</div>
          <!-- 翻页分页 -->
          <pageye v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
            class="pagination" @pagination="getList" />
        </div>
        <div class="">
          <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
            style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center" />
            <el-table-column width="160px" label="操作" align="center">
              <template slot-scope="scope">
                <div class="searchbtns">
                  <el-button size="small" type="primary"
                    :disabled="scope.row.nodeState == '待提交' ? false : scope.row.nodeState == '' ? false : true"
                    @click="changeNodeState(scope.row)">办理
                  </el-button>
                  <el-button size="small" type="primary" @click="handleCheck(scope.row)">查看</el-button>
                  <!--                  <el-button size="small" type="primary" @click="printContract(scope.row)">打印合同</el-button>-->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.nodeState }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="jc" label="订单编号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.billNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="制单日期" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.createDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.customerName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.mobile }}</span>
              </template>
            </el-table-column>
            <el-table-column label="品牌" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单台成交价" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.singleFinalPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.payType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订金(元)" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.depositAll }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否保险" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.isInsurance }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <div class="tit" />
          <!-- 翻页 -->
          <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
            class="pagination" @pagination="getList" />
        </div>
      </div>
    </div>
    <!--新增修改部分组件-->
    <div-add @handleReturn="visible = true" ref="divadd" @doback="resetState" @reloadlist="getList" />
    <!--详情部分组件-->
    <div-info @handleReturn="visible = true" ref="dingdanxinxiinfo" @doback="resetState" />
    <!-- 打印合同 -->
    <print-contract />
    <!-- 确认贷款人 -->
    <confirm-lender />
  </div>
</template>

<script>
import {delBySids, dictType, getListOrg, getListPage} from '@/api/salesManagement/orderManagement'
// import {delBySids, dictType, getListOrg, getListPage} from '@/apimock/salesManagement/orderManagement'
import {submitSales, updateSales} from '@/api/portal/workFlow'
import {loginDetails} from '@/api/dictcommons/basemanufacturer'
import {getStorage} from '@/utils/auth'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import divAdd from './xiaoshoudingdanAdd.vue'
import divInfo from './xiaoshoudingdanInfo.vue'
import printContract from "@/views/xiaoshouguanli/xiaoshoudingdan/printContract";
import confirmLender from "@/views/xiaoshouguanli/xiaoshoudingdan/confirmLender";

export default {
  name: 'xiaoshoudingdan',
  components: {
    Pagination,
    pageye,
    divAdd,
    divInfo,
    printContract,
    confirmLender
  },
  data() {
    return {
      isableSub: false,
      viewState: 1, // 1、列表 2、添加 3、修改 4、查看 5、打印合同 6、确认贷款人
      xiaodaijinrongfanganInfoShow: false,
      hetongdanganguanliAddShow: false,
      treedata: [],
      payTypeList: [],
      saleTypeList: [],
      isSearchShow: false,
      searchxianshitit: '隐藏查询条件',
      // 查询 -----------
      tableKey: 0,
      addOrUpdatetypes: '',
      list: [],
      sids: [],
      nodeState_list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      total: 1,
      listLoading: false,
      listQuery: {
        current: 1,
        size: 20,
        params: {
          createDateEnd: '', // 单据日期结束时间
          createDateStart: '', // 单据日期开始时间
          customerName: '', // 客户名称
          modelName: '', // 车型名称
          orgName: '', // 部门名称
          payTypeKey: '',
          staffSid: window.sessionStorage.getItem('staffSid'),  //销售专员sid
        }
      },
      temp: {
        contactMobile: '1'
      }, // 添加和修改
      nodeState: '', // 节点状态

      visible: true
      // ------------------------------------
    }
  },
  computed: {},
  created() {
    // 加载列表
    this.getList()
  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    init() {

    },
    // ----------功能打开开始--------
    resetState() {
      this.visible = true
    },
    xiaoshouhetong(row) {
      console.log('9511', row)
      this.visible = false
      this.$refs['hetongdanganguanli-Info'].showOrderHeTong(row.sid)
    },
    // 打开查看详情
    handleCheck(row) {
      this.visible = false
      this.$refs['dingdanxinxiinfo'].showInfo(row.sid)
    },
    // 打开添加
    handleCreate(row) {
      this.visible = false
      this.$refs['divadd'].showAdd()
    },
    // 办理
    changeNodeState(row) {
        this.visible = false
        this.$refs['divadd'].showEdit(row.sid)
    },
    // 进入详情
    openInfo() {
      this.visible = false
      this.$refs['dingdanxinxiinfo'].showInfo()
    },
    printContract(row) {
      this.visible = false
      this.$refs['divPrint'].showInfo(row)
    },

    // ----------功能打开下一级页面结束--------
    // 重置
    handleReset() {
      this.listQuery.params.customerName = ''
      this.listQuery.params.modelName = ''
      this.listQuery.params.orgName = ''
      this.listQuery.params.payType = ''
      this.listQuery.params.saleType = ''
      this.listQuery.params.staffName = ''
      this.listQuery.params.createDateEnd = ''
      this.listQuery.params.createDateStart = ''
      //   // this.getList()
    },

    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    // 支付方式 purchaseType
    getpayTypeList() {
      dictType({
        type: 'purchaseType',
      }).then((response) => {
        if (response.code === '200' && response.data) {
          this.payTypeList = response.data
        }
      })
    },

    // 查询列表信息
    getList() {
      this.listLoading = true
      getListPage(this.listQuery).then((response) => {
        this.listLoading = false
        if (
          response.code === '200' &&
          response.data &&
          response.data.total > 0
        ) {
          this.list = response.data.records
          this.total = response.data.total
        } else {
          this.list = []
          this.total = 0
        }
      })
    },

    handleCheckChange(data, checked, node) {
      this.listQuery.params.orgName = data.name
    },
    // 查询按钮
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },

    // 勾选
    handleSelectionChange(row) {
      const aa = []
      const bb = []
      row.forEach((element) => {
        aa.push(element.sid)
        bb.push(element.nodeState)
      })
      this.sids = aa
      this.nodeState_list = bb
    },

    // 提交审核
    handleSubmit() {
      if (this.sids.length == 1) {
        this.$confirm('是否确定提交该业务', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submitDto.businessSid = this.sids[0]
          submitSales(this.submitDto).then((response) => {
            if (response.code === '200') {
              this.updateDto.nodeState = response.data.nodeState
            } else {
              this.$message({
                showClose: true,
                message: '提交失败！',
                type: 'error'
              });
            }
          })
        })
      } else if (this.sids.length == 0) {
        this.$message({
          showClose: true,
          message: '您还未选择，请选择数据！',
          type: 'error'
        });
      } else if (this.sids.length > 1) {
        this.$message({
          showClose: true,
          message: '您选择的数据过多，请选择一条数据编辑！',
          type: 'error'
        });
      }
    },
    // 根据本行sid删除数据
    handleDelete() {
      if (this.sids.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择数据！',
          type: 'error'
        });
        return
      }
      delBySids(this.sids).then((response) => {
        if (response.code === '200') {
          this.getList()
        } else {
          this.$message({
            showClose: true,
            message: '删除失败！',
            type: 'error'
          });
        }
      })
    },
    handleReturn(){

    },
    // 导出
    handleDaoChu(row) {
      this.$confirm('确定要导出数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // .then(() => {
      //   const tempData = Object.assign({}, row) // copy obj
      //   // console.log('测试删除ID' + JSON.stringify(tempData.id))
      //   delServiceType(tempData.id).then(response => {
      //     if (response.code === 20000) {
      //       // console.log('测试删除' + JSON.stringify(response))
      //       this.$notify({
      //         title: '提示',
      //         message: '导出成功',
      //         type: 'success',
      //         duration: 2000
      //       })
      //       this.getList()
      //     } else {
      //       this.$notify({
      //         title: '失败',
      //         message: response.msg,
      //         type: 'error'
      //       })
      //     }
      //   })
      // })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消'
      //   })
      // })
    },
    // 添加修改返回
    AddUpdateReturn() {
      this.visible = true
    },
    // 添加保存完成
    dataCreated() {
      this.visible = true
      this.getList()
    },
    // 修改保存完成
    dataUpdated() {
      this.visible = true
      this.getList()
    }
  }
}
</script>
<style scoped>
.filter-item {
  padding: 0 10px;
  width: 220px;
  display: inline-block;
}

/* .filter-item-time {
    padding: 0 10px;
    width: 300px;
    display: inline-block;
  } */
/* .listcon{height: calc(100vh - 550px);overflow-y: auto;overflow-x: hidden;} */
</style>
