<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <el-row class="title_box">
      <el-col :span="20">
        <div class="title">说明书管理</div>
      </el-col>
      <el-col class="operate_box" :span="4">
        <el-button type="primary" @click="handleEdit('', 'add')">新增</el-button>
      </el-col>
    </el-row>
    <!---产品列表-->
    <div class="table">
      <el-table :data="data.list" border fit highlight-current-row>
        <el-table-column label="封面图" prop="image" align="center" width="300">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px;" :src="scope.row.image" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="ID" width="95"></el-table-column>
        <el-table-column label="说明书名称" prop="name" align="center">
          <template #default="scope">
            <div style="color:#4178D5; cursor: pointer;" @click="Downloads(scope.row)">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" align="center"></el-table-column>
        <el-table-column label="状态" align="center" width="150">
          <template #default="scope">
            <el-switch v-model="scope.row.status" class="ml-2" :active-value=1 :inactive-value=0
              @change="changeStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="150" label="操作" prop="" align="center">
          <template #default="scope">
            <el-button title="编辑" type="text" @click="handleEdit(scope.row, 'edit')">编辑</el-button>
            <el-button title="删除" type="text" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="m-b-20 m-t-20" :current-page="query_form.page" :page-sizes="[10, 20, 30]"
        :page-size="query_form.size" layout="total, sizes, prev, pager, next, jumper" :total="data.count"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" small>
      </el-pagination>
      <!--删除提醒-->
      <el-dialog v-model="data.deleteModal" title="删除说明书" :show-close="true" width="440px">
        <div class="del_text">确定删除已选择的说明书吗？</div>
        <template #footer>
          <div class="text-r">
            <el-button type="primary" plain>取消</el-button>
            <el-button type="primary" @click="deleteClick">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!---产品列表-->
  </el-main>
</template>
<script>
import { reactive, onMounted, ref } from 'vue'
import Request from '@/utils/request.js'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import axios from 'axios'
export default {
  name: 'Instructions',
  setup () {
    let data = reactive({
      cdn: '',
      deleteModal: false,
      language_id: 0,
      count: 0,
      list: [],
      row: {}
    })
    let query_form = reactive({
      page: 1,
      size: 10
    })

    onMounted(() => {
      data.cdn = store.state.user.cdn
      data.language_id = store.state.user.language.id
      getList()
    })
    //实例化请求
    const request = new Request()
    let router = useRouter()
    let store = useStore()

    const getList = () => {
      request.get('v1/manual', { language_id: data.language_id, page: query_form.page, size: query_form.size }).then(res => {
        if (res.status == 200) {
          let result = res.data.data
          result.forEach(item => {
            item.image = data.cdn + item.image
          })
          data.list = result
          data.count = res.data.count
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    //分页
    const handleSizeChange = (size) => {
      query_form.size = size
      getList()
    }

    const handleCurrentChange = (page) => {
      query_form.page = page
      getList()
    }
    const changeStatus = (row) => {
      request.put('v1/manual/' + row.id, { id: row.id, language_id: data.language_id, name: row.name, status: row.status }).then(res => {
        if (res.status == 200) {
          ElMessage({
            type: 'success',
            message: res.message
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }

    //编辑
    const handleEdit = (row, type) => {
      console.log(row, type)
      if (type == 'edit') {
        router.push({
          path: '/download/editInstruct',
          query: {
            id: row.id,
            type: type
          },
        })
      } else {
        router.push({
          path: '/download/editInstruct',
          query: {
            type: type
          },
        })
      }
    }
    //删除
    const handleDel = (row) => {
      data.row = row
      data.deleteModal = true
    }
    const deleteClick = () => {
      request.delete('v1/manual/' + data.row.id, { id: data.row.id }).then(res => {
        if (res.status == 200) {
          data.deleteModal = false
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    //下载说明书
    const Downloads = (row) => {
      console.log(row)
      let url = data.cdn + row.url
      let filename = row.name
      return fetch(url).then(res => res.blob().then(blob => {
        if (res.status == 404) {
          ElMessage({
            type: 'error',
            message: '下载失败！'
          })
          return false;
        }
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
      }))
    }

    return {
      data,
      query_form,
      getList,
      handleSizeChange,
      handleCurrentChange,
      handleEdit,
      handleDel,
      changeStatus,
      deleteClick,
      Downloads
    }
  }
}
</script>
<style scoped>
.del_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #606266;
}
.operate_box {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
</style>