<!-- 土壤检测报告上传 -->
<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>
        </el-form-item>
        <el-button type="primary"
                   @click="handlequery"> 查询</el-button>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="right-main">
      <div>
        <div style="box-shadow: 0px 0px 10px 2px rgb(153 153 153 / 20%);margin-top: 20px;padding: 16px 16px 0 16px;background: #fff;"></div>
        <!-- 表格 -->
        <Table v-loading="loading"
               :header="headerName"
               :columnWidths="columnWidths"
               :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="price"
                    slot-scope="scope">
            <div>￥{{ scope.row.price }}/{{scope.row.chargeUnit}}</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="handleEdit(scope.row)"
                           type="text"
                           size="small"
                           class="edit-btn">
                  <i class="line-icon line-edit-icon"></i>查看
                </el-button>
                <el-button @click="handleEdit1(scope.row)"
                           type="text"
                           size="small"
                           class="edit-btn">
                  <i class="line-icon line-edit-icon"></i>上传检测报告
                </el-button>
              </template>
            </el-table-column>
          </template>
        </Table>
      </div>
      <!-- 弹出层 -->
      <el-dialog :title="titleMasger"
                 :visible.sync="dialogVisible"
                 :before-close="handleClose"
                 width="500px">
        <el-form ref="courseInfo"
                 label-width="80px">
          <!-- 查看 -->
          <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.price}} /{{params1.chargeUnit}}</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>{{params1.state == 1 ? '审核通过': ''}}</span></div>
            <div v-if="params1.fileUrl"><span>检测报告：</span>
              <span>
                <!-- <a href="#"
                   :download="params1.fileUrl">点击下载检测报告!</a> -->
                <el-button type="primary"
                           style="background-color:#4091ff;"><a href="#"
                     :download="params1.fileUrl">点击下载检测报告！</a></el-button>
              </span>
            </div>
            <div v-else><span>检测报告：</span>检测报告暂未上传！</div>
          </div>

          <div v-else>
            <el-form-item label="上传文件"
                          prop="fileUrl">
              <div>
                <el-upload :limit="1"
                           drag
                           class="avatar-uploader"
                           action=""
                           :http-request="handleRequest"
                           :before-upload="beforeAvatarUpload"
                           v-model="uploadData"
                           :file-list="fileList">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </div>
            </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="onSubmit">确定</el-button>
        </div>
      </el-dialog>
      <!--分页-->
      <div style="text-align: center"
           class="pagination">
        <page-nation :total="totals"
                     @pageChange="pageChange"
                     :defaultPage.sync="currentPage"
                     :pageSizes="pageSizes"></page-nation>
      </div>
    </div>
  </div>
</template>

<script>
//接口请求方法导入
import {
  // soiltableList,// 初始化列表数据
  getbyidtableList, // id查询
  getquery,// 模糊查询
  putdatalist,// 编辑
} from '../../apis/modules/soildetection2'
import {
  ossPrepare,
} from "../../apis/modules/auth.js";
import axios from "axios";
//公共组件导入
import pageNation from "../common/PageNation.vue";
import Table from '../common/Table.vue';
export default {
  name: 'SoilDetection3',
  components: {
    pageNation,
    Table,
  },
  data () {
    return {
      tableData: [],
      loading: false,
      headerName: { agrotechnicalName: '服务名称', address: '服务地址', price: '单价', cultivatedArea: '种植面积', username: '申请者', phone: '联系电话', state: '审核状态' },
      columnWidths: {},
      slotColumns: ['agrotechnicalName', 'address', 'price', 'cultivatedArea', 'username', 'phone', 'state'],// 插槽调用
      // 分页相关
      pageSizes: [10, 30, 50, 120], //控制每页显示的条数
      currentPage: 1,
      totals: 0,
      pageSize: 10,
      params1: {},
      fileList: [],
      uploadData: "",
      titleMasger: '',
      id: { id: '' },
      dialogVisible: false,
      lookcontent: false,
      value: { page: 1, pageSize: 10, agName: '', state: 1 } // 模糊查询，查询参数
    }
  },
  created () { this.initdata() },
  methods: {
    // 初始化数据
    initdata () {
      this.loading = true
      getquery(this.value)
        .then(res => {
          console.log(res);
          this.tableData = res.d.items
          this.totals = res.d.total
          this.loading = false
        })
    },
    // 查询
    handlequery () {
      getquery(this.value)
        .then(res => {
          this.tableData = res.d.items
        })
    },
    // 分页查询
    pageChange () {
      // 1.当有查询条件时的分页查询
      if (value.agName || 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()
      }
    },
    // 查看
    handleEdit (row) {
      this.dialogVisible = true
      this.lookcontent = true
      this.titleMasger = '查看'
      this.params1 = row
    },
    // 上传检测报告
    handleEdit1 (row) {
      this.dialogVisible = true
      this.lookcontent = false
      this.titleMasger = '检测报告上传'
      this.params1 = row
    },
    // 上传检测报告
    handleRequest (res) {
      this._getPicByOss(res.file, pic => {
        this.uploadData = pic;
        let file = res.file;
        let fileName = file.name;
        if (!!fileName) {
          ossPrepare({ objectName: fileName }).then(res => {
            let params = new FormData();
            let formData = res.data.formData;
            params.append("OSSAccessKeyId", formData.OSSAccessKeyId);
            params.append("key", formData.key);
            params.append("policy", formData.policy);
            params.append("signature", formData.signature);
            params.append(
              "success_action_status",
              formData.success_action_status
            );
            params.append("file", file);
            axios({
              url: res.data.host,
              method: "post",
              data: params,
              header: {
                "access-Control-Allow-Origin": "*",
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }).then(res => {
              this.guaranteeSlip(res.config.url + "/" + formData.key);
            });
          });
        }
      });
    },
    guaranteeSlip (urled) {
      this.params1.fileUrl = urled
    },
    onSubmit () {
      putdatalist(this.params1)
        .then(res => {
          this.dialogVisible = false;
          this.initdata()
        })
    },
    beforeAvatarUpload (file) {
      const fileType = file.name.substring(file.name.lastIndexOf("."));
      if (fileType.toLowerCase() != ".xls" && fileType.toLowerCase() != ".xlsx" && fileType.toLowerCase() != ".doc" && fileType.toLowerCase() != ".docx" && fileType.toLowerCase() != ".pdf") {
        this.$message.error("上传的文件格式错误");
        return false;
      }
    },
    // 弹出层关闭之前
    handleClose (done) {
      if (!this.titleMasger == "查看") {
        this.$refs['elForm'].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>
