
<template>
  <div>
    <basicLayout 
      ref="basicLayout"
      tableName="orderTable" 
      idName="sa_orderid" 
      :apiId="{query:20230105143002,del:20221108152102}"
      :oldFormPath="{add:'HDrpManagement/orderManage/modules'}"
      :options="options"
      :detailPath="{
        path:'/orderdetail'
      }"
      @listData="list">
      <template #titleRight>
          <el-button v-if="tool.checkAuth($route.name,'refreshStock')" style="margin-left:16px" size="small" type="primary" @click="refreshStock">刷新库存</el-button>
      </template>
      <template #custom>
        <div class="mt-10">
          <p class="search__label">状态:</p>
          <el-select v-model="where.status" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="change">
            <el-option label="新建" value="新建"></el-option>
            <el-option label="提交" value="提交"></el-option>
            <el-option label="交期待确认" value="交期待确认"></el-option>
            <el-option label="交期确认" value="交期确认"></el-option>
            <el-option label="审核" value="审核"></el-option>
            <el-option label="关闭" value="关闭"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">订单类型:</p>
          <el-select v-model="where.type" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="change">
            <el-option label="标准订单" value="标准订单"></el-option>
            <el-option label="特殊订单" value="特殊订单"></el-option>
            <el-option label="项目订单" value="项目订单"></el-option>
            <el-option label="促销订单" value="促销订单"></el-option>
            <el-option label="工具订单" value="工具订单"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">领域:</p>
          <el-select v-model="where.tradefield" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="change">
            <el-option
              v-for="(item,index) in tradefieldList"
              :key="index"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">核销状态:</p>
          <el-select v-model="where.writeoffstatus" clearable style="margin-right:10px" size="small" placeholder="请选择核销状态" @change="change">
            <el-option label="已核销" value="已核销"></el-option>
            <el-option label="部分核销" value="部分核销"></el-option>
            <el-option label="未核销" value="未核销"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">开票状态:</p>
          <el-select v-model="where.invoicestatus" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="change">
            <el-option label="已开票" value="已开票"></el-option>
            <el-option label="部分开票" value="部分开票"></el-option>
            <el-option label="未开票" value="未开票"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">是否退货:</p>
          <el-select v-model="where.isreturn" clearable style="margin-right:10px" size="small" placeholder="请选择退货状态" @change="change">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">是否变更:</p>
          <el-select v-model="where.ischange" clearable style="margin-right:10px" size="small" placeholder="请选择变更状态" @change="change">
            <el-option label="未变更" value="0"></el-option>
            <el-option label="已变更" value="1"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label" >单据日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#000000" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#d90a0a" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '提交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#e09a1a" v-if="scope.data.column.data[[scope.data.column.columnname]] == '交期待确认'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#3874f6" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '交期确认'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#52C41A" v-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#b2c0ea" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '关闭'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'ischange'">
          {{ scope.data.column.data.ischange == 1 ? '是' : '否' }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'isreturn'">
          {{ scope.data.column.data.isreturn == 1 ? '是' : '否' }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'amount'">
          {{ tool.formatAmount(scope.data.column.data.amount,2) }}
        </div>
        <div v-else-if="scope.data.column.columnname == 'defaultamount'">
          {{ tool.formatAmount(scope.data.column.data.defaultamount,2) }}
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </template>
    </basicLayout>
  </div>
</template>

<script>
import { Loading } from 'element-ui';

export default {
  data () {
    return {
      options:[],
      tradefieldList:'',
      where: {
        "condition":"",
        "status" : '',
        "type" : '',
        "tradefield": '',
        "writeoffstatus":"",//未核销,已核销,部分核销"invoicestatus":"未开票"，//未开票,已开票,部分开票"isreturn":"，//是否退回:0,1"ischange":.".//是否变更:0,1
        "invoicestatus":'',
        "isreturn": '',
        "ischange": '',
      },
      dateSelect:[]
      
    }
  },
  methods:{
    list (data) {
      // console.log(data);
    },
    change () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where = this.where
      this.$refs.basicLayout.listData()
    },
    /* 领域 */
    async getTradefield () {
      const res = await this.$store.dispatch('optiontypeselect','tradefield')
      this.tradefieldList = res.data
      console.log(this.tradefieldList,'领域');
    },
    async refreshStock () {
      Loading.service({ fullscreen: true ,text:'刷新中...'});
      const res = await this.$api.requested({
        "id": "20230222203703",
        "version":1,
        "content": {
        }
      })
      Loading.service().close()
      this.$message({
        message:'刷新成功',
        type:"success"
      })
    },
    selectChange(){
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.$refs.basicLayout.param.content.pageNumber = 1
        this.$refs.basicLayout.param.content.where.begindate = this.dateSelect[0]
        this.$refs.basicLayout.param.content.where.enddate = this.dateSelect[1]
      }else {
        this.$refs.basicLayout.param.content.where.begindate = ''
        this.$refs.basicLayout.param.content.where.enddate = ''
      }
      this.$refs.basicLayout.listData()
    }
  },
  created () {
    this.getTradefield()
  }
}

</script>
<style scoped>
.box > div {
  margin-bottom:10px;
  display: inline-block;
}
</style>