<template>
    <div style="margin-bottom: 20px">
      <div class="title">模版信息</div>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称">
              <span v-if="markInfo.title">{{ markInfo.title }}</span>
              <span v-else>-</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="模板描述">
              <span v-if="markInfo.content">{{ markInfo.content }}</span>
              <span v-else>-</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建时间">
              <span v-if="markInfo.createTime">{{ markInfo.createTime }}</span>
              <span v-else>-</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建人">
              <span v-if="markInfo.createBy">{{ markInfo.createBy }}</span>
              <span v-else>-</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="title">模版详情</div>
      <el-form :model="queryParams" ref="queryForm" :inline="true"label-width="68px">
        <el-form-item label="装配标题" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入装配标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="detailList">
        <el-table-column label="装配标题" align="center" prop="title" />
        <el-table-column label="装配序号" align="center" prop="orders" />
        <el-table-column label="装配描述" align="center" prop="content" show-overflow-tooltip/>
        <el-table-column label="装配图片" align="center" prop="imgUrl">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.imgUrl"
              :src="scope.row.imgUrl"
              :preview-src-list="[scope.row.imgUrl]"
              :z-index="9999"
              style="width: 30px;height: 30px;"
            ></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip/>
        <el-table-column label="创建人" align="center" prop="createBy" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-document"
              @click="handleDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getMarkDetail"
      />

      <!-- 详情 -->
      <DetailInfo ref="detail"/>

    </div>
</template>

<script>
  import { listDetail } from "@/api/track/executeDetail";
  import { getMark } from "@/api/track/mark";
  import { listDetail as markDetailList } from "@/api/track/detail";
  import DetailInfo from "../../mark/detail/components/DetailInfo";
  export default {
    name: "mark-info",
    props:{
      inspectId: {
        type: Number
      }
    },
    components:{
      DetailInfo
    },
    created(){
      this.getExecuteDetail();
    },
    data(){
        return{
          total: 0,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            markId: null,
            orders: null,
            title: null,
          },
          markInfo: {},
          loading: false,
          detailList: []

        }
    },
    methods:{
      getExecuteDetail(){
        listDetail({inspectId:this.inspectId,type:3}).then(res =>{
          this.getMarkInfo(res.rows[0].typeId);
          this.queryParams.markId = res.rows[0].typeId;
          this.getMarkDetail();
        })
      },
      //模版信息
      getMarkInfo(typeId){
        getMark(typeId).then(res =>{
          this.markInfo = res.data;
        })
      },
      //模版步骤
      getMarkDetail(){
        this.loading = true;
        markDetailList(this.queryParams).then(res =>{
          this.detailList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getMarkDetail();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //详情
      handleDetail(row){
        this.$refs.detail.getDetailInfo(row.id);
      },

    }
  }
</script>

<style scoped lang="scss">
  .title{
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
  }

</style>
