<style>
  li {
    list-style-type: none;
  }

  .courseOffer ul {
    padding: 0px;
  }

  .courseOffer li {
    background: rgba(221, 222, 224, 0.2);
    border-radius: 4px;
    margin-top: 15px;
  }

  .courseOffer li .dline {
    display: table;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .courseOffer li .d1,
  .courseOffer li .d2,
  .courseOffer li .d3,
  .courseOffer li .d4,
  .courseOffer li .d5 {
    width: 18%;
    padding: 20px 20px 10px;
  }

  .courseOffer li .d7 {
    flex: 1;
    width: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .courseOffer li .d1 .di-title {
    font-size: 16px;
    color: #111111;
  }

  .courseOffer li .d1 .di-c {
    font-size: 14px;
    display: flex;
    line-height: 28px;
    color: #111111;
  }

  .courseOffer li .d6 {
    padding: 10px 20px;
    width: 100%;
    height: inherit;
    position: relative;
    border-top: 1px solid #dddee0;
  }

  .courseOffer li .d6 .progress {
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .courseOffer li .d2 div {
    margin: 2px 0;
    font-size: 14px;
    color: #111111;
  }

  .courseOffer li .d2-n {
    font-size: 12px;
    color: #999999;
    margin-right: 20px;
  }

  .courseOffer li .d3 .d3-s {
    color: var(--q-color-negative);
    font-weight: bold;
  }

  .courseOffer li .d3 div {
    margin: 2px 0;
    font-size: 14px;
  }

  .courseOffer li .d4 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .courseOffer li .d5 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .courseOffer .myCourseNName {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff !important;
    text-align: center;
    line-height: 25px;
    background-color: #004d40;
  }

  .courseOffer .el-range-editor.el-input__inner {
    background-color: transparent;
  }

  .courseOffer .el-range-editor .el-range-input {
    background: transparent;
  }

</style>
<template>
  <div class="page-body courseOffer">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select filled use-input input-debounce="0" option-value="id" @input="resetSearch" option-label="name"
            v-model="msg.AuditStatus" :options="AuditStatusOptions" label="审核状态" :dense="false" emit-value map-options>
          </q-select>
        </div>
        <div class="col-3">
          <q-select filled use-input input-debounce="0" option-value="id" @input="resetSearch" option-label="name"
            v-model="msg.StockOutStatus" :options="StockOutStatusOptions" label="出库状态" :dense="false" emit-value
            map-options>
          </q-select>
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.SuppliesName"
            label="耗材名称" @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select filled use-input input-debounce="0" option-value="id" @input="resetSearch" option-label="name"
            v-model="msg.Type" :options="TypeOptions" label="类型" :dense="false" emit-value map-options>
          </q-select>
        </div>
        <div class="col-3">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="创建开始时间"  end-placeholder="创建结束时间">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class=" sticky-right-column-table sticky-column-table" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">出库管理</div>
          <q-space />
          <q-btn color="accent" size="11px" icon="add" @click="showAdd">新增出库单</q-btn>
        </template>
        <template v-slot:body-cell-StockOutStatus="props">
          <q-td :props="props">
            <div v-if="props.row.StockOutStatus===1">未出库</div>
            <div v-if="props.row.StockOutStatus===2">部分出库</div>
            <div v-if="props.row.StockOutStatus===3">已出库</div>
          </q-td>
        </template>
        <template v-slot:body-cell-AuditStatus="props">
          <q-td :props="props">
            <div v-if="props.row.AuditStatus===1">审核中</div>
            <div v-if="props.row.AuditStatus===2">通过</div>
            <div v-if="props.row.AuditStatus===3">驳回</div>
          </q-td>
        </template>
        <template v-slot:body-cell-ClassName="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.ClassName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-CourseName="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.CourseName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-FinanceIdList="props">
          <q-td :props="props">
            <div v-for="item in props.row.FinanceIdList" :key="item.Id" class="td_height" @click="gocaiwu(item)"
              style="text-decoration:underline;color:#2961FE;cursor:pointer;">
              {{item}}
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-SuppliesName="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.SuppliesName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-Type="props">
          <q-td :props="props">
            <div v-if="props.row.Type===1">班级相关</div>
            <div v-if="props.row.Type===2">其他业务</div>
          </q-td>
        </template>

        <template v-slot:body-cell-BrandName="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.BrandName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-CategoryName="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.CategoryName}}
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-Number="props">
          <q-td :props="props">
            <div v-for="item in props.row.DetailList" :key="item.Id" class="td_height">
              {{item.Number}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" @click="goDetail(props.row)">详情</q-btn>
            <q-btn flat size="xs" icon="edit" color="accent" style="color:#f00" @click="quxiao(props.row)"
              v-if="props.row.CreateBy==loginId&&props.row.AuditStatus!=2">取消</q-btn>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <q-dialog v-model="showaddStockOut" persistent>
      <SuppliesStockOutFrom @success="successSave" />
    </q-dialog>
  </div>
</template>
<script>
  import SuppliesStockOutFrom from '../../components/sale/addSuppliesStockOut-from'
  import {
    GetSuppliesStockOutApplyForPageList,
    SetSuppliesStockOutApplyForState
  } from '../../api/sale/StockOutApplyFor'
  export default {
    meta: {
      title: "出库管理"
    },
    components: {
      SuppliesStockOutFrom
    },
    data() {
      return {
        AuditStatusOptions: [{
            id: 0,
            name: "不限"
          },
          {
            id: 1,
            name: "审核中"
          },
          {
            id: 2,
            name: "通过"
          },
          {
            id: 3,
            name: "驳回"
          }
        ],
        StockOutStatusOptions: [{
            id: 0,
            name: "不限"
          },
          {
            id: 1,
            name: "未出库"
          },
          {
            id: 2,
            name: "部分出库"
          },
          {
            id: 3,
            name: "已出库"
          }
        ],
        TypeOptions: [{
            id: 0,
            name: "不限"
          },
          {
            id: 1,
            name: "主营业务"
          },
          {
            id: 2,
            name: "其他业务"
          },
        ],
        dateList: [], //创建时间
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          AuditStatus: 0,
          StockOutStatus: 0,
          ClassName: "",
          SuppliesName: "",
          StartTime: "",
          EndTime: "",
          Type: 0
        },
        pageCount: 0,
        offerObj: {}, //报价单信息
        columns: [{
            name: "AuditStatus",
            label: "审核状态",
            field: "AuditStatus",
            align: "left"
          },
          {
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left"
          },
          {
            name: "Type",
            label: "类型",
            field: "Type",
            align: "left"
          },



          {
            name: "ClassName",
            label: "班级名称",
            align: "left",
          },
          {
            name: "CourseName",
            label: "课程名称",
            align: "left",
          },
          {
            name: "SuppliesName",
            label: "耗材名称",
            align: "left",
          },
          {
            name: "CategoryName",
            label: "分类",
            align: "left",
          },
          {
            name: "BrandName",
            label: "品牌",
            align: "left",
          },
          {
            name: "Number",
            label: "数量",
            align: "left",
          },
          {
            name: "FinanceIdList",
            label: "相关单据",
            align: "left",
          },
          {
            name: "StockOutStatus",
            label: "出库状态",
            field: "StockOutStatus",
            align: "left"
          },

          {
            name: "CreateByName",
            label: "申请人",
            align: "left",
            field: "CreateByName"
          },
          {
            name: "CreateDate",
            label: "申请时间",
            align: "left",
            field: "CreateDate"
          },
          {
            name: 'optioned',
            label: '操作',
            align: "left",
          }
        ],
        showaddStockOut: false,
        loginId: 0,

      }
    },

    mounted() {
      this.getSuppliesStockOutApplyForPageList();
      this.loginId = JSON.parse(localStorage.getItem('loginUserInfo')).data.Id
    },
    methods: {
      //跳转详情
      goDetail(item) {
        this.$router.push({
          path: '/sale/SuppliesStockOutApplyForDetail',
          query: {
            Id: item.Id
          }
        });
      },

      //刷新页面
      refreshPage() {
        // this.showOrderForm = false;
        // this.showEditPrice = false;
        this.getSuppliesStockOutApplyForPageList();
      },

      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getSuppliesStockOutApplyForPageList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getSuppliesStockOutApplyForPageList();
      },
      //获取出库申请分页列表
      getSuppliesStockOutApplyForPageList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        GetSuppliesStockOutApplyForPageList(this.msg).then(res => {
          this.loading = false;
          this.data = res.data.data.pageData;
          this.pageCount = res.data.data.pageCount;

        }).catch(() => {
          this.loading = false;
        })
      },
      // 显示新增出库单
      showAdd() {
        this.showaddStockOut = true
      },
      closePop() {
        this.showaddStockOut = false
      },
      //取消
      quxiao(row) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定取消？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          let obj = {
            ApplyForId: row.Id,
            Type: 1,
            Remark: ""
          }
          SetSuppliesStockOutApplyForState(obj).then(res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message)
              this.getSuppliesStockOutApplyForPageList();
            } else {
              this.Error(res.data.message)
            }
          })
        }).onCancel(() => {

        });
      },
      gocaiwu(item) {
        let tempStr = '/financial/financalDocument/FinancialDocumentsDetail?id=' + item;
        this.$router.push({
          path: tempStr
        });
      },
      successSave() {
        this.getSuppliesStockOutApplyForPageList()
        this.closePop()
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
<style>
  .td_height {
    height: 40px;
    line-height: 40px;
  }

</style>
