<template>
    <!-- 协议管理页面 -->
    <div class="app-container">
        <!-- 表格 -->
        <TableModel
          :formLabel="formLabel"
          :columnsList="columnsList"
          :request-api="queryProtocolListApi"
          ref="tableRef"
        >
            <template slot="btn" slot-scope="{ queryParams }">
                <el-button type="primary" @click="handleAddData()"
                    >新增协议</el-button
                >
                <el-button @click="handleExportData(queryParams, 'base/agreement/export', '协议清单')"
                    >导出</el-button
                >
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button
                    type="primary"
                    size="mini"
                    @click="handleEditData(data)"
                    >编辑</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleDeleteData(data.id, deleteProtocolApi)"
                    >删除</el-button
                >
            </template>
            <template slot="url" slot-scope="{ data }">
<!--              <img :src="data.url" style="width: 50px; height: 50px">-->
              <h4
                style="color: #02A7F0; cursor: pointer"
                v-if="data.url === '' || data.url === null"
                @click="handleEditData(data)"
              >上传</h4>
              <h4
                style="color: #02A7F0; cursor: pointer"
                v-else
                @click="openUrl(data.url)"
              >查看</h4>
            </template>
            <template slot="authorizingPhone" slot-scope="{ data }">
              {{ phoneCrypto(data.authorizingPhone) }}
            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <template slot="outerContent">
                <!-- 新增以及修改数据的表单组件 -->
                <FormProtocol
                    @closeDialog="closeDialog"
                    :editParams="editParams"
                />
            </template>
        </DialogModel>

      <!--  缩略图弹框  -->
      <el-dialog
        width="60%"
        :visible.sync="picVisible"
        title="图片预览"
        append-to-body>
        <img :src="picUrl" style="width: 100%; height: 500px" alt="">
      </el-dialog>
    </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { commonMixin } from '../mixins/common'
import FormProtocol from './components/form-protocol'
import { queryProtocolListApi, deleteProtocolApi } from '@/api/base/agreement'
export default {
    name: 'ProtocolManage',
    mixins: [commonMixin], // 混入公共方法和数据
    components: {
        FormProtocol,
    },
    created() {
      this.picVisible = false
      this.picUrl = undefined
    },
    methods: {
      queryProtocolListApi,
      deleteProtocolApi,
      openUrl(url) {
        this.picUrl = url
        this.picVisible = true
      }
    },
    data() {
        return {
            formLabel,
            columnsList,
            dialogConfig,
            // 新建时弹框标题
            addDialogTitle: '新增协议',
            // 修改时弹框标题
            editDialogTitle: '修改协议',
            picVisible: false,
            picUrl: undefined
        }
    },
}
</script>
