<template>
    <div class="container" style="padding: 30px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="工具类型" prop="toolType">
                <el-select v-model="queryParams.toolType">
                    <el-option label="" value="">请选择</el-option>
                    <el-option
                        v-for="item in this.toolTypes"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue * 1"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="交付方式" prop="deliverType">
                <el-select v-model="queryParams.deliverType">
                    <el-option label="" value="">请选择</el-option>
                    <el-option label="License" value="License">License</el-option>
                    <el-option label="SaaS" value="SaaS">SaaS</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status">
                    <el-option label="" value="">请选择</el-option>
                    <el-option label="已上架" value="1">已上架</el-option>
                    <el-option label="已下架" value="2">已下架</el-option>
                </el-select>
            </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-row style="margin-bottom: 10px">
            <el-col>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" class="btn-blue" @click="handleAdd"
                    >新增</el-button
                ></el-col
            >
        </el-row>
        <el-table v-loading="loading" :data="toolList">
            <el-table-column label="工具ID" align="center" key="toolId" prop="toolId" width="100" />
            <el-table-column label="工具名称" align="center" key="name" prop="name" width="250"/>
            <el-table-column label="工具类型" align="center" key="toolTypeName" prop="toolTypeName" >
            </el-table-column>
            <el-table-column label="交付方式" align="center" key="deliverType" prop="deliverType" >
            </el-table-column>
            <el-table-column label="价格" align="center" key="price" prop="price" >
                <template slot-scope="scope">
                    <span>{{ scope.row.price | currency('￥') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" key="status" prop="status" >
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == 1">已上架</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 2">已下架</el-tag>
                    <el-tag type="info" v-if="scope.row.status == 3">删除</el-tag>
                    <!-- <span>{{ scope.row.status == 0 ? '未上架' : scope.row.status == 1 ? '已上架' : '已下架' }}</span> -->
                </template>
            </el-table-column>
            <el-table-column label="上架时间" align="center" key="onlineTime" prop="onlineTime" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.onlineTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="更新时间" align="center" key="updateTime" prop="updateTime" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status != 3" size="mini" type="text" icon="el-icon-edit" @click="modify(scope.row)">编辑</el-button>
                    <el-button
                        v-if="scope.row.status == 1"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="updateStatus(scope.row.toolId, 2)"
                        >下架
                    </el-button>
                    <el-button
                        v-if="scope.row.status == 2 || scope.row.status == 0"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="updateStatus(scope.row.toolId, 1)"
                        >上架
                    </el-button>
                    <el-button
                        v-if="scope.row.status != 3"
                        size="mini"
                        type="text"
                        @click="updateStatus(scope.row.toolId, 3)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <tool-edit ref="toolEditDialog" @refresh="refresh" :toolTypes="toolTypes"></tool-edit>
    </div>
</template>

<script>
import { listTools } from '@/api/toolInfo/market'
import { changeStatus } from '@/api/toolInfo/tool'
import ToolType from '../../components/enum/ToolType'
import ToolEdit from '../../components/ToolEdit'

export default {
    name: 'toolManage',
    components: { ToolEdit, ToolType },
    data() {
        return {
            loading: false,
            toolList: [],
            // 总条数
            total: 0,
            toolTypes: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                toolType: undefined,
                deliverType: undefined,
                status: undefined,
            },
        }
    },
    methods: {
        getList() {
            this.loading = true
            listTools(this.queryParams).then((response) => {
                this.toolList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        modify(row) {
            this.$refs.toolEditDialog.openDialog(row)
        },
        updateStatus(toolId, status) {
            let param = {}
            param.toolId = toolId
            param.status = status
            let tip = status == 1 ? '上架' : status == 2 ? '下架' : '删除'
            this.$confirm('确定要' + tip + ' 该工具吗？', '提示', { type: 'warning' }).then(() => {
                changeStatus(param).then((response) => {
                    this.$alert(tip + '操作成功')
                    this.getList()
                })
            })
        },
        refresh() {
            this.getList()
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getList()
        },
        // 新增
        handleAdd() {
          this.$refs.toolEditDialog.openDialog({deliverType: 'License'})
        }
    },
    created() {
        this.getList()
        this.getDicts('sys_tool_type').then((response) => {
            this.toolTypes = response.data
        })
    },
}
</script>

<style scoped>
</style>
