<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        size="mini"
        v-model="valueDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy - MM - dd "
        value-format="yyyy-MM-dd"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-input size="mini" v-model="search.reportName" clearable placeholder="报表名称" style="width: 200px;" class="filter-item" />
      <el-input size="mini" v-model="search.personName" clearable placeholder="修图人" style="width: 200px;" class="filter-item" />
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button size="mini" class="filter-item" type="success" @click="generateBtn">
        生成日报表
      </el-button>
      <el-button size="mini" class="filter-item" type="primary" @click="checkRepot">
        日报表账期列表
      </el-button><br><br>
<!--      <span style="padding-top: 7px;color: #3c3c3c" v-if="gridData.length>0">开始时间:&nbsp;&nbsp;{{rowData.beginTime | getTime}}&nbsp;&nbsp;&nbsp;&nbsp;结束时间:&nbsp;&nbsp;{{rowData.endTime | getTime}}&nbsp;&nbsp;&nbsp;&nbsp;报表名称:&nbsp;&nbsp;{{rowData.reportName}}</span>-->
    </div>
    <div class="table-con">
      <el-table
        size="mini"
        :data="gridData"
        max-height="700"
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="left" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="handleEdit(row.id)" plain type="primary" size="mini">
              修改
            </el-button>
            <el-button v-if="row.itemState<2" @click="handleExamine(row,1)" plain type="success" size="mini">
              审核
            </el-button>
            <el-button @click="handleReturn(row)" plain type="warning" size="mini">
              重新生成
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="personName"
          width="80"
          label="修图人">
          <template slot-scope="scope">
            <span @click="handleExamine(scope.row,2)" style="cursor: pointer;color: #409EFF">{{scope.row.personName}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="totalPCount"
          width="55"
          label="总P数">
        </el-table-column>
        <el-table-column
          width="70"
          label="状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.itemState<=1" size="mini" type="danger">
              待审核
            </el-tag>
            <el-tag v-else-if="row.itemState==2" size="mini" type="success">
              已审核
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkMan"
          width="70"
          label="审核人">
        </el-table-column>
        <el-table-column
          label="审核日期"
          width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.checkTime">{{scope.row.checkTime | getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="itemMemos"
          width="150"
          show-overflow-tooltip
          label="备注">
        </el-table-column>
        <el-table-column
          prop="typePCount1"
          width="80"
          label="合版类P数">
        </el-table-column>
        <el-table-column
          prop="typePCount2"
          width="80"
          label="画册台历挂历周历P数">
        </el-table-column>
        <el-table-column
          prop="typePCount3"
          width="80"
          label="单页/联单/对联P数">
        </el-table-column>
        <el-table-column
          prop="typePCount4"
          width="80"
          label="模切/袋子类P数">
        </el-table-column>
        <el-table-column
          prop="typePCount5"
          width="80"
          label="数码/小批量/单色画册P数">
        </el-table-column>
        <el-table-column
          prop="typePCount6"
          width="80"
          label="盒子/专色P数">
        </el-table-column>
        <el-table-column
          width="140"
          label="起始日期"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.beginTime">{{scope.row.beginTime | getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          label="终止日期"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.endTime">{{scope.row.endTime | getTime}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="createMan"-->
<!--          width="120"-->
<!--          label="制单人">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="reportName"
          width="220"
          label="报表名称"
        >
        </el-table-column>
      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getDataList" />
    </div>
    <el-dialog title="日报表账期列表" width="1200px" :visible.sync="dialogTableVisible">
        <el-table
          size="mini"
          :data="tableData"
          v-loading="listLoading2"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
        >
          <el-table-column
            label="#"
            align="center"
            type="index"
            :index="indexMethod">
          </el-table-column>
          <el-table-column label="操作" align="left" width="90" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
<!--              <el-button @click="handleCheck(row)" type="primary" plain size="mini">-->
<!--                选择-->
<!--              </el-button>-->
              <el-button plain @click="toVoidBtn(row.id)" plain type="warning" size="mini">
                作废
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="reportName"
            width="240"
            label="报表名称"
          >

          </el-table-column>
          <el-table-column
            label="起始日期"
            width="160"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.beginTime">{{scope.row.beginTime | getTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="160"
            label="结束时间"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.endTime">{{scope.row.endTime | getTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createMan"
            width="120"
            label="创建人">
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="160"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{scope.row.createTime | getTime}}</span>
            </template>
          </el-table-column>
        </el-table>
      <pagination v-show="listData3.total>0" :total="listData3.total" :page.sync="listData3.page" :limit.sync="listData3.pageSize" @pagination="getTableInfo" />
    </el-dialog>
    <el-dialog title="批量生成日报表" width="500px" :visible.sync="dialogFormVisibleExt">
      <el-form>
        <el-form-item label="报表截止日期" label-width="100">
          <el-date-picker
            :editable="false"
            v-model="valueTime"
            type="datetime"
            value-format='yyyy-MM-dd HH:mm:ss'
            placeholder="选择日期时间"
            default-time="00:00:00">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisibleExt = false">取 消</el-button>
        <el-button type="primary" @click="batchListBtn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="订单详情"
      append-to-body
      :close-on-click-modal="false"
      class="orderDetailDialog"
      :visible.sync="detailVisible"
      top="10px"
      width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <el-dialog title="修改日报表" width="500px" :visible.sync="dialogEditVisible">
      <el-form>
        <el-form-item label="备注" label-width="100">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10px" :title="examineTitle" width="1200px" :visible.sync="dialogExamineVisible">
      <el-form v-show="examineFooter">
        <el-form-item label="备注" label-width="100">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="itemMemos">
          </el-input>
        </el-form-item>
      </el-form>
      <el-table
        size="mini"
        max-height="700"
        :data="gridExamineData"
        v-loading="recorLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column
          label="#"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          prop="itemKindName"
          width="130px"
          label="P数类型">
        </el-table-column>
        <el-table-column
          label="p数"
          align="center"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="{row}">
            <span @click.stop="handlePCount(row)" style="width: 80px;display: block;cursor: pointer;color: #409eff">{{row.pCount}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="修改次数"
          align="center"
          show-overflow-tooltip
          width="60"
        >
          <template slot-scope="{row}">
            <span style="color: #e4493c" v-if="row.editCountP>=1">{{row.editCountP}}</span>
            <span v-else>{{row.editCountP}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="修图人"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="{row}">
            <span>{{row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          show-overflow-tooltip
          width="100"
        >
          <template slot-scope="{row}">
            <span v-if="row.printOrder.voidFlag!=0">
              <el-tooltip content="订单已作废" placement="top">
                <span style="color: #f56c6c"> {{row.printOrder.orderCode}}</span>
              </el-tooltip>
            </span>
            <span v-else>{{row.printOrder.orderCode}}</span>

          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          show-overflow-tooltip
          width="120"
        >
          <template slot-scope="{row}">
            <span>{{row.printOrder.productName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="印品名称"
          show-overflow-tooltip
          width="90"
        >
          <template slot-scope="{row}">
            <span @click="openDetail(row.printOrder)" style="color: #20a0ff;cursor: pointer">{{row.printOrder.orderName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单备注"
          show-overflow-tooltip
          width="290"
        >
          <template slot-scope="{row}">
            {{row.printOrder.orderMemo}}
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          show-overflow-tooltip
          width="120"
        >
          <template slot-scope="{row}">
            {{row.printOrder.clientName}}
          </template>
        </el-table-column>
      </el-table>
      <span style="font-size: 16px;margin-top: -10px;padding-bottom: 10px" v-if="pCount_Sum">P数合计：<span style="font-weight: bold;color: #409EFF">{{pCount_Sum}}</span></span>
      <pagination v-show="listData2.total>0" :total="listData2.total" :page.sync="listData2.page" :limit.sync="listData2.pageSize" @pagination="getRecordInfo" />

      <div v-show="examineFooter" slot="footer" class="dialog-footer">

        <el-button @click="dialogExamineVisible = false">取 消</el-button>
        <el-button type="primary" @click="examineSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <pcount-edit @getList="getRecordInfo" ref="pcountEdit"></pcount-edit>
  </div>
</template>

<script>
import {
  getRetouchDailyReportList,
  voidRetouchDailyReport,
  retouchDailyReportMultiAdd,
  editRetouchDailyReportItem,
  submitRetouchDailyReportItem,
  getRetouchOrderDetailList,
  getRetouchDailyReportItemList,
  retouchDailyReportSingleAdd
} from '@/api/specialEdition/reportJs.js'
import {mapGetters} from "vuex";
import OrderDetail from '@/components/orderDetail/orderDetail'
import {editImageDispatchItemPCount} from "@/api/specialEdition/fileHandle";
import pcountEdit from "@/views/specialEdition/components/pcountEdit";
export default {
  name: "reportinfo",
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  components: {
    OrderDetail,
    pcountEdit
  },
  data() {
    return {
      recorLoading:false,
      examineTitle:"",
      examineFooter:false,
      pCount_Sum:"",
      valueDate:[],
      dialogPCountVisible:false,
      titlePConut:"",
      formData: {
        PCount: ''
      },
      detailVisible:false,
      gridExamineData:[],
      rowData:{},
      itemMemos:"",
      itemState:"",
      dialogExamineVisible:false,
      dialogEditVisible:false,
      textarea:"",
      dialogFormVisibleExt:false,
      valueTime:"",
      gridData:[],
      rowId:"",
      dialogTableVisible:false,
      listLoading: false,
      listLoading2: false,
      tableData: [],
      search: {
        reportName:'',
        personName:'',
        beginTime:"",
        endTime:"",
      },
      listData3:{
        total:0,
        page: 1,
        pageSize:10
      },
      listData2:{
        total:0,
        page: 1,
        pageSize:50
      },
      listData:{
        total:0,
        page: 1,
        pageSize:30
      }
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // editPCount(){
    //   var _that = this;
    //   _that.dialogPCountVisible = false;
    //   if(!_that.formData.PCount){
    //     _that.$message.warning('p数不能为空')
    //     return
    //   }
    //   var data = {
    //     "id": _that.rowId,
    //     "pCount": _that.formData.PCount
    //   }
    //   // console.log(data);
    //   editImageDispatchItemPCount(data).then(response => {
    //     // console.log(response)
    //     if (response.httpCode == 200) {
    //       _that.$message.success("修改成功");
    //       _that.getRecordInfo();
    //     }
    //
    //   }).catch(err => {
    //     _that.dialogPCountVisible = false;
    //     _that.$message.error(err)
    //   })
    // },
    handlePCount(row){
      var _that = this;


      // _that.rowId = row.id;
      // _that.formData.PCount = row.pCount;
      // _that.pcountType = row.itemKind
      // _that.titlePConut = "修改订单P数"+"("+row.printOrder.orderName+")";

      _that.dialogFormVisible = true;
      _that.$refs.pcountEdit.dialogFormVisible = true;
      _that.$refs.pcountEdit.rowId = row.id;
      _that.$refs.pcountEdit.PCount = row.pCount;
      _that.$refs.pcountEdit.pcountType = row.itemKind;
      _that.$refs.pcountEdit.titlePConut = "修改订单P数"+"("+row.printOrder.orderName+")";
      _that.$refs.pcountEdit.getPcountTypeList();

    },
    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.id
        _that.$refs.orderDetail.getInfo()
      })
    },
    getRecordInfo(){
      const _that = this;
      _that.recorLoading = true;
      var page = {
        pageIndex:_that.listData2.page,
        pageSize: _that.listData2.pageSize,
      }
      var infoParam = {
        "idUser": _that.rowData.idPerson,
        "beginTime": JSON.stringify(_that.rowData.beginTime),
        "endTime": JSON.stringify(_that.rowData.endTime),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getRetouchOrderDetailList(infoParam).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.gridExamineData = data;
        _that.pCount_Sum = response.collection.pCount_Sum
        _that.listData2.total = response.total;
        _that.recorLoading = false;
        // console.log(_that.tableData)
      }).catch(err => {
        _that.recorLoading = false;
      })
    },
    examineSubmit(){
      const _that = this;
      _that.dialogExamineVisible = false;
      const srcReportItem = {
        id: _that.rowId,
        itemState: _that.itemState,
        itemMemos: _that.itemMemos
      };
      var data = {
        "srcReportItem": JSON.stringify(srcReportItem),
      }

      // return
      submitRetouchDailyReportItem(data).then(response => {
        _that.$message.success('审核成功');
        // _that.listData.page = 1;
        _that.getDataList();
        _that.listLoading = false;

      }).catch(err => {
        _that.listLoading = false
        // _that.$message.error(err)
      })
    },
    editSubmit(){
      const _that = this;
      _that.dialogEditVisible = false;
      const srcReportItem = {
        id: _that.rowId,
        itemMemos: _that.textarea
      };
      var data = {
        "srcReportItem": JSON.stringify(srcReportItem),
      }

      // return
      editRetouchDailyReportItem(data).then(response => {
        console.log(response)
        _that.$message.success('修改成功');
        // _that.listData.page = 1;
        _that.getDataList()
      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    handleExamine(row,type){
      //审核
      const _that = this;
      _that.rowId = row.id;
      _that.rowData = row;
      _that.itemMemos = "";
      _that.itemState = row.itemState;
      _that.getRecordInfo();
      if(type==1){
        _that.examineFooter = true;
        _that.examineTitle="审核日报表";
      }else {
        _that.examineFooter = false;
        _that.examineTitle="查看日报表明细"
      }
      _that.dialogExamineVisible = true;

    },
    handleEdit(id){
      //修改
      const _that = this;
      _that.rowId = id;
      _that.textarea = "";
      _that.dialogEditVisible = true;
    },
    batchListBtn(){
      const _that = this;
      _that.dialogFormVisibleExt = false;
      const data = {
        endTime:_that.valueTime
      };
      // console.log("qqq",_that.valueTime);
      // return
      retouchDailyReportMultiAdd(data).then(response => {
        // console.log(response)
        _that.$message.success('成功');
        // _that.listData.page = 1;
        _that.getDataList();
      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    generateBtn(){
      //批量生成日报表
      const _that = this;
      _that.dialogFormVisibleExt = true;
      _that.getNewDate();
    },
    getNewDate() {
      //获取当前时间
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.valueTime = yy + '-' + mm + '-' + dd + ' ' + 23 + ':' + 59 + ':' + 59;
    },
    handleReturn(row){
      //重新生成
      const _that = this;
      _that.$confirm('确定重新生成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var srcReport = {
          beginTime: row.beginTime,
          endTime: row.endTime,
          personItemList:[
            {
              id:row.id,
              idReport:row.idReport,
              idPerson:row.idPerson
            }
          ]

        };
        var data  = {
          "srcReport": JSON.stringify(srcReport),
        }
        // return
        retouchDailyReportSingleAdd(data).then(response => {
          // console.log(response)
          _that.$message.success('成功');
          // _that.listData.page = 1;
          _that.getDataList()
        }).catch(err => {
          // _that.$message.error(err)
        })
      }).catch(() => {

      });
    },
    toVoidBtn(id){
      //作废
      const _that = this;
      _that.$confirm('确定作废?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          idReport: id
        };
        // return
        voidRetouchDailyReport(data).then(response => {
          console.log(response)
          _that.$message('作废成功');
          _that.listData3.page = 1;
          _that.getTableInfo()
        }).catch(err => {
          // _that.$message.error(err)
        })
      }).catch(() => {

      });
    },
    getDataList(){
      const _that = this;
      _that.listLoading = true;
      if (_that.valueDate == null || _that.valueDate < 0 || _that.valueDate.length<=0) {
        _that.search.beginTime = ''
        _that.search.endTime = ''
      } else {
        _that.search.beginTime = _that.valueDate[0];
        _that.search.endTime = _that.valueDate[1];
      }
      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var params = {
        "reportName": _that.search.reportName,
        "personName": _that.search.personName,
        "beginTime": _that.search.beginTime,
        "endTime": _that.search.endTime
      }
      var infoParam = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      getRetouchDailyReportItemList(infoParam).then(response => {
        // console.log(response)
        _that.listLoading = false;
        if (response.httpCode == 200) {
          _that.gridData = response.data;
          _that.listData.total = response.total
        }
      }).catch(err => {
        _that.$message.error()
      })
    },
    checkRepot(){
      const _that = this;
      _that.listData3.page = 1;
      _that.getTableInfo();
      _that.dialogTableVisible = true;
    },
    handleUpdate(){
      const _that = this;
    },
    //获取表格数据
    getTableInfo(){
      const _that = this
      _that.listLoading2 = true;
      var params = _that.search;
      var page = {
        pageIndex:_that.listData3.page,
        pageSize: _that.listData3.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getRetouchDailyReportList(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData3.total = response.total
        // console.log(_that.tableData)
        _that.listLoading2 = false
      }).catch(err => {
        _that.listLoading2 = false
      })
    },
    //搜索
    searchData(){
      this.listData.page = 1;
      this.getDataList()
    },
    //序号
    indexMethod(index) {
      return index+1;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.filter-container {
  margin-bottom: 15px;
}
</style>

