<!-- 土壤检测审批端 -->
<template>
  <div class="table_box">
    <div class="formStyle">
      <el-form :inline="true">
        <el-form-item prop="">
          <span>服务名称：</span>
          <el-input v-model="value.agName" style="width: 260px" placeholder="请输入关键字查询"></el-input>&nbsp;
          <span>审核状态：</span>
           <el-select v-model="value.state"  clearable placeholder="请选择" style="width: 260px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-button type="primary" @click="handlequery"> 查询</el-button>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="right-main">
      <div style="box-shadow: 0px 0px 10px 2px rgb(153 153 153 / 20%);margin-top: 20px;padding: 16px 16px 0 16px;background: #fff;">
        <Table v-loading="loading" :columnWidths="columnWidths" :header="headerName" :data="tableData" :slotColumns="slotColumns"> 
          <el-table-column label="序号" width="80px" type="index"></el-table-column>
          <template width="160px" slot="agrotechnicalName" slot-scope="scope">
            <div>{{ scope.row.agName }}</div> 
          </template>
          <template width="160px" slot="address" slot-scope="scope">
            <div>{{ scope.row.address }}</div>
          </template>
          <template width="160px" slot="cultivatedArea" slot-scope="scope">
            <div>{{ scope.row.cultivatedArea }}</div>
          </template>
          <template width="160px" slot="username" slot-scope="scope">
            <div>{{ scope.row.username }}</div>
          </template>
          <template width="160px" slot="phone" slot-scope="scope">
            <div>{{ scope.row.phone }}</div>
          </template>
          <template width="160px" slot="state" slot-scope="scope">
            <div v-if="scope.row.state == 0">审核中</div>
            <div v-else-if="scope.row.state == 1">审核通过</div>
            <div v-else-if="scope.row.state == 2">审核驳回</div>
          </template>
          <template slot="oprate">
            <el-table-column label="操作" width="260" align="center">
              <template slot-scope="scope">
                <el-button @click="look(scope.row)" type="text" size="small" class="edit-btn">
                  <i class="line-icon line-edit-icon"></i>查看
                </el-button>
                <el-button @click="pass(scope.row)" type="text" size="small" class="edit-btn" :disabled="scope.row.state == 1 ? true : false">
                  <i class="line-icon line-edit-icon"></i><span>通过</span>
                </el-button>
                <el-button @click="pass1(scope.row)" type="text" size="small" class="edit-btn" :disabled="scope.row.state == 2 ? true : false">
                  <i class="line-icon line-edit-icon"></i><span>驳回</span>
                </el-button>
                <el-button @click="timer(scope.row)" type="text" size="small" class="edit-btn" :disabled="scope.row.state == 0 || scope.row.state == 2 ? true : false">
                  <i class="line-icon line-edit-icon"></i>采样时间
                </el-button>
              </template>
            </el-table-column>
          </template>
        </Table>
      </div>
      <!--分页-->
      <div style="text-align: center" class="pagination">
        <page-nation :total="totals" @pageChange="pageChange" :defaultPage.sync="currentPage" :pageSizes="pageSizes"></page-nation>
      </div>
    </div>
    <!-- 弹出层 -->
    <div>
      <el-dialog :title="titleMasger" :visible.sync="dialogVisible" :before-close="handleClose" width="500px">
        <el-form ref="courseInfo"  label-width="80px" :rules="rules" :model="params1">
          <!-- 查看 -->
          <div v-if="lookcontent" class="lookcontent">
              <div><span>服务名称：</span><span>{{params1.agName}}</span></div>
              <div><span>服务地址：</span><span>{{params1.address}}</span></div>
              <div><span>种植面积：</span><span>{{params1.cultivatedArea}}</span></div>
              <div><span>申请者：</span><span>{{params1.username}}</span></div>
              <div><span>联系电话：</span><span>{{params1.phone}}</span></div>
              <div><span>审核状态：</span><span v-if="params1.state == 0">审核中</span><span v-else-if="params1.state == 1">审核通过</span><span v-else-if="params1.state == 2">审核驳回</span></div>
              <div v-if="params1.state == 2"><span>驳回原因：</span><span>{{params1.stateFailed}}</span></div>
              <div v-if="params1.state == 1"><span>采样时间：</span><span>{{params1.samplingTime}}</span></div>
          </div>

          <div v-else>
            <!-- 驳回原因 -->
            <el-form-item label="驳回原因" prop="stateFailed" v-if="visible">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="params1.stateFailed"></el-input>
            </el-form-item>
            <!-- 采样时间 -->
            <el-form-item label="采样时间" prop="samplingTime" v-else>
              <el-date-picker v-model="params1.samplingTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择采样日期" @change="seletime"></el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!lookcontent">
          <el-button plain @click.native="cancel">取消</el-button>
          <el-button type="primary" @click.native.prevent="onSubmit1">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//接口请求方法导入
import {
  soiltableList,// 初始化列表数据
  getbyidtableList, // id查询
  getquery,// 模糊查询
  putdatalist,// 编辑
  } from '../../apis/modules/soildetection2' 
//组件导入
import pageNation from '../common/PageNation.vue'
import Table from '../common/Table.vue'

export default {
  name: 'SoilDetection',
  components: {
    pageNation,
    Table,
  },
  data() {
    return {
      tableData: [], // 初始化数据
      dialogVisible:false,// 弹出层开关
      tabPosition: '审核列表',// 默认值
      titleMasger:'',// 弹出层标题
      // 表格header标题
      headerName:{ agrotechnicalName: '服务名称',address: '服务地址',cultivatedArea: '种植面积', username: '申请者',phone: '联系电话',state: '审核状态'},
      slotColumns: ['agrotechnicalName','address','cultivatedArea','username','phone','state'],// 插槽调用
      loading: false,// loading加载
      params:{ pageSize:10,page:1 },// 初始分页参数

      // 分页相关
      pageSizes: [10, 30, 50, 120], // 控制每页显示的条数
      currentPage: 1,// 当前默认页码
      totals: 1,
      pageSize: 10,

      columnWidths: { state: '100px'}, // 控制某一列的宽度，设置对应字段即可
      params1:{
        samplingTime: "",// 采样时间
        stateFailed:"",// 驳回原因
      },
      order:{}, // 编辑参数
      
      visible: false,
      id:{id:''}, // id查询
      lookcontent:false,
      options: [{value: '0',label: '审核中'}, {value: '1',label: '审核通过'}, {value: '2', label: '审核驳回'}],//select选择器
      value:{page:1,pageSize:10,agName:'',state:''}, // 模糊查询，查询参数
      rules:{
        stateFailed:[{ required: true, message: "请输入驳回原因", trigger: "blur" }],
        samplingTime:[{ required: true, message: "请输入采样时间", trigger: "blur" }],
      }
    }
  },
  created() { this.initdata() },
  methods: {
    // 初始化数据
    initdata(){
      this.loading = true
      soiltableList(this.params)
        .then(res =>{
          console.log(res);
          this.tableData = res.d.items
          this.totals = res.d.total
          this.loading = false
        })
    },
    // 分页查询
    pageChange(pageNum) {
      // 1.当有查询条件时的分页查询
      if(this.value.agName || this.value.state){
        this.value.page = pageNum.page
        this.value.pageSize = pageNum.pageSize
      }else{
      // 2.没有查询条件时的分页查询 
        this.params.page = pageNum.page
        this.params.pageSize = pageNum.pageSize
        this.initdata()
      }
    },
    // 模糊查询
    handlequery(){
      getquery(this.value)
        .then(res =>{
          console.log(res);
          this.tableData = res.d.items
        })
    },
    // 查看
    look(row){
      this.titleMasger = "查看";
      this.dialogVisible = true
      this.lookcontent = true
      this.params1 = row
    },
    // 通过
    pass(row){
        this.order = row
        this.dialogVisible = true
        this.lookcontent = false
        this.titleMasger = "采样时间";
        this.visible = false
    },
    // 驳回
    pass1(row){
        this.order = row
        this.dialogVisible = true
        this.lookcontent = false
        this.titleMasger = "驳回原因";
        this.visible = true
    },
    // 通过、驳回提交
    onSubmit1(){
      // 驳回
      if(this.visible){
        console.log(111);
        this.order.samplingTime = ''
        this.order.stateFailed = this.params1.stateFailed
        this.order.state = 2
        let mes = '驳回成功'
        this.putdatalistFn(this.order,mes)
      }else if(this.titleMasger == '采样时间'){
        this.order.samplingTime = this.params1.samplingTime
        this.order.state = 1
        let mes = '审核通过'
        this.putdatalistFn(this.order,mes)
      }else{
        let mes = '采样时间更改成功'
        this.order.samplingTime = this.params1.samplingTime
        this.putdatalistFn(this.order,mes)
      }
    },
    // 编辑请求封装
    putdatalistFn(order,mes){
      putdatalist(order)
        .then(res =>{
          if(res.status == 0){
            this.$message.success(mes)
            this.initdata()
            this.dialogVisible = false
          }else{
            this.$message.error('操作失败')
          }
        })
    },
    // 采样时间
    timer(row){
      this.titleMasger = "采样时间编辑";
      this.dialogVisible = true
      this.lookcontent = false
      this.visible = false
      this.params1.samplingTime = row.samplingTime
      this.order = row
    },
    // 时间变更获取
    seletime(val){
      this.params1.samplingTime = val
    },
     // 弹出层关闭之前
    handleClose(done){ 
      if(!this.titleMasger == "查看"){
        this.$refs['courseInfo'].resetFields() //重置表单验证
      }
      done();
    },
    // 取消
    cancel(){ 
      this.$refs['courseInfo'].resetFields() //重置表单验证
      this.dialogVisible = false 
    },
    // id查询封装方法 --> 多处调用
    byiddata(id){
      this.id.id = id
      getbyidtableList(this.id)
      .then(res=>{
        this.params1 = res.d
      })
    },
  },
}
</script>

<style scoped>
.formStyle {
    box-shadow: 0px 0px 10px 2px rgba(153, 153, 153, 0.2);
    margin-top: 20px;
    padding: 16px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
  }
.lookcontent{
  line-height: 26px;
}
  </style>
