<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="display: flex;justify-content: space-between;padding-top:10px;">
        <div style="display: flex;">
          <div style="width: 68px;height:36px;line-height:36px;" >商品名称</div>
          <el-input placeholder="请输入"  v-model="formRul.shopName" style="width:168px;">
          </el-input>
        </div>
        <div>

          <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
          </el-button>
          <el-button @click="resetting"
          class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
          </el-button>
        </div>
      </div>
        <div style="padding: 20px 0px;">
          <el-button
            @click="addbuss(1)"
            style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
          > 新增
          </el-button>
          <el-button
            @click="danHis"
            style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
          > 单据审核历史记录查询
          </el-button>

        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="auto"
            min-width="4%"
            prop="id"
          >
          <template slot-scope="scope">
            {{scope.$index +1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="shopName"
            width="auto"
            min-width="20%"
          >

          </el-table-column>


<el-table-column
            label="采购数量"
            width="auto"
            min-width="20%"
            prop="shopNumber"
          />
<el-table-column
            label="预估金额"
            width="auto"
            min-width="20%"
            prop="estimatedAmount"
          />

          <el-table-column
            label="操作"
            width="auto"
            min-width="17%">
            <template slot-scope="scope">
              <div @click="danjuShen(scope.row)" class="tableBtn greens" v-if="scope.row.audit== 0">单据审核</div>
              <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
			<div>共{{total}}条</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev,pager,next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 新建商家弹框 -->
        <el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'"  :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="60%" class="dialog_css_Xq"  center :close-on-click-modal="false" :show-close="false"	>
                    <div >
                          <div style="margin-bottom: 20px;">
                          <el-form ref="form" :model="formInline" label-width="80px">
                            <el-form-item label="商品名称">
                                             <el-select v-model="formInline.shopName" filterable placeholder="请选择" style="width:100%">
                                               <el-option
                                                 v-for="item in shopData"
                                                 :key="item.productId"
                                                 :label="item.productName"
                                                 :value="item.productName">
                                               </el-option>
                                             </el-select>
                                    </el-form-item>
                            <el-form-item label="采购数量">
                                           <el-input v-model="formInline.shopNumber" placeholder="请输入" />
                                    </el-form-item>
                                    <el-form-item label="预估金额">
                                                   <el-input v-model="formInline.estimatedAmount" placeholder="请输入" />
                                            </el-form-item>
                          </el-form>

                          </div>
                          <div style="display: flex;justify-content: flex-end;">
                            <el-button  @click="closeFn" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
                          <el-button  @click="addCheck" v-if="index!= 2"  style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">确定</el-button>
                            </div>
                    </div>
        </el-dialog>
      </div>
<el-dialog title="单据审核历史记录"  :visible.sync="danShow" custom-class="diaslog_zhong" style="padding: 0;" width="60%" class="dialog_css_Xq"  center :close-on-click-modal="false" :show-close="false"	>
                    <div >
                          <el-table
                                    :data="danjuList"
                                     :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                                    style="width: 100%"
                                  >
                                    <el-table-column
                                      label="序号"
                                      width="auto"
                                      min-width="5%"
                                      prop="id"
                                    >
                                    <template slot-scope="scope">
                                      {{scope.$index +1 }}
                                      </template>
                                    </el-table-column>
                                    <el-table-column
                                      label="商品名称"
                                      prop="shopName"
                                      width="auto"
                                      min-width="20%"
                                    >

                                    </el-table-column>

                          <el-table-column
                                      label="采购数量"
                                      width="auto"
                                      min-width="20%"
                                      prop="shopNumber"
                                    />
                          <el-table-column
                                      label="审核时间"
                                      width="auto"
                                      min-width="20%"
                                      prop="auditTime"
                                    />
                                    <el-table-column
                                                label="审核状态"
                                                width="auto"
                                                min-width="20%"

                                              >
                                              <template slot-scope="scope">
                                      {{scope.row.auditResult == 0?'失败':'成功'}}
                                              </template>
                                              </el-table-column>
                                  </el-table>
                          <div style="display: flex;justify-content: flex-end;">
                            <el-button  @click="danShow=false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>

                            </div>
                    </div>
        </el-dialog>
        <el-dialog title="审批" :visible.sync="Liunie" custom-class='bian_css' style="padding: 0;" width="55%"
            center:close-on-click-modal="false">
            <div style="margin: 0 10px 20px 15px;" class="xinFrom">
        <el-form  label-position="left"  label-width="130px"
          style="position: relative">
                <el-form-item label="审核状态" prop="solutionEditor" style="margin-bottom:20px;" >
                  <el-radio-group v-model="shenObj.auditResult" style="line-height:40px;">
                      <el-radio :label="1">通过</el-radio>
                      <el-radio :label="0">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="OAshen"
                style="background-color: #3F9B6A;color: #fff" >确定</el-button>
              <el-button @click="Liunie =false"  class="buttonHover"
                    style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
            </span>
          </el-dialog>
  </div>
</template>

<script>
import {
  getClassifyGetAll,
  cereInventoryAdd,
  cereInventoryEdit,
  cereInventoryDel,
  cereInventoryQueryByPage
} from '@/api/commodity'
export default {
  data () {
    return {
      rules: {},
      currentPage: 1,
      total: 0,
      flag: false,
      pageSize: 10,
      ggXin: false,
      index:1,
      formInline: {
      shopName:'',
      shopNumber:'',
      estimatedAmount:'',
        operationType:'0'

      },
      tableData: [],
      formRul:{
       pageNumber: 1,
       pageSize: 10,
       shopName:'',
operationType:'0'
      },
      shopList: {
        page: 1, // 当前页
        pageSize: 10
      },
      shopData:[],
      danjuList:[],
      danShow:false,
      Liunie:false,
      shenObj:{
        id:'',
        auditResult:1,
        audit:1
      }

    }
  },
  computed: {},
  mounted() {

  this.getAll(this.formRul)
    },

  methods: {
    addbuss (val,item) {
      if(val == 1){
        this.formInline= {
      shopName:'',
      shopNumber:'',
      estimatedAmount:'',
        operationType:'0'

      }
    }
      this.index = val
      this.ggXin = true
    },
   async getAll(form){

     const list = await cereInventoryQueryByPage(form)
     this.tableData = list.data.content
      const res = await getClassifyGetAll(this.shopList)
      this.shopData = res.data.list
    },
    onSubmit(){
      this.getAll(this.formRul)
    },
    handleSizeChange(val){

    },
    handleCurrentChange(){

    },
   async addCheck(){
await cereInventoryAdd(this.formInline)
this.$message({
                      message: '新增成功',
                      type: 'success'
                    })
this.ggXin = false
this.getAll(this.formRul)
    },
    handleDelete(row){
            const h = this.$createElement;
            this.$msgbox({
              title: '消息',
              message: h('p', null, [
                h('span', null, '是否删除 '),
              ]),
              showCancelButton: true,
              showClose: false,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              customClass: 'oe-dialog-btn',
              beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                  cereInventoryDel({
                   id: row.id
                  }).then(res => {
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    })
                    this.getAll(this.formRul)
                    done();
                  })
                } else {
                  done();
                }
              }
            })

    },
    closeFn () {
      this.ggXin = false
      this.index = 1
    },
   async danHis(){
      let objform ={
        pageNumber: 1,
        pageSize: 10,
        operationType:'0',
              audit: 1
      }
      const list = await cereInventoryQueryByPage(objform)
      this.danjuList = list.data.content
      this.danShow = true
    },
    onSubmit(){
      this.getAll(this.formRul)
    },
    resetting(){
     this.formRul={
       pageNumber: 1,
       pageSize: 10,
       planName:'',
      }
      this.getAll(this.formRul)
    },
    danjuShen(obj){
      this.shenObj.id= obj.id
      this.Liunie = true
    },
    //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
   async OAshen(){
   this.shenObj.auditTime = this.updateCurrentTime()
    await  cereInventoryEdit(this.shenObj)
    this.Liunie = false
    }
  }
}
</script>

<style scoped>
.zhuti {
  padding: 0  20px 20px 20px;
  background-color: #Fff;
  min-height: calc(100vh - 118px - 20px);
}

/deep/ .el-form-item__content {
  line-height: 0;
}

.tableBtn {
  display: inline-block;
  margin-right: 10px;
}

.formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
  }

.greens {
  color: #3F9B6A;
}



.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}

.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}

/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
/deep/ .el-pagination__total{
  margin-top:4px;
}


     ::v-deep .el-select .el-input.is-focus .el-input__inner{
         border-color:#3F9B6A
     }
     ::v-deep .dialog_css_Xq{
       .el-dialog__header{
         background-color:#fafafa;

       }
       .el-dialog__title{
         color:#000
       }
     }
</style>
<style lang="scss" scoped>
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

</style>
