<template>
    <div>
    <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
      <el-form ref="queryRef" :model="queryParams" :inline="true">
       
        <!-- <el-form-item label="类型编码">
          <el-input v-model="queryParams.typeName" placeholder="请输入类型编码" clearable style="width: 200px" />
        </el-form-item> -->
        <el-form-item label="协议类型">
          <el-select v-model="queryParams.status" placeholder="请选择协议类型" clearable style="width: 200px">
            <el-option :key="1" label="服务条款" :value="1" />
            <el-option :key="2" label="隐私协议" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px">
            <el-option :key="1" label="可用" :value="1" />
            <el-option :key="2" label="不可用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
          <el-button icon="Refresh" plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container" style="margin-bottom: 20px;border-radius: 10px;">
      <el-button 
        type="primary" 
        plain 
        icon="Plus" 
        @click="showpop(1)"
      >新增</el-button>
      <el-table
        :data="dictlist"
        style="width: 100%;margin-top: 10px;"
        border
        stripe
        highlight-current-row
        row-key="id"
        max-height="600px"
      >

        <el-table-column min-width="150" label="协议类型" align="center" prop="type">
            <template #default="scope">
            <div>{{ scope.row.type == 1?'服务条款':'隐私协议'}}</div>
            </template>
        </el-table-column>
        <el-table-column min-width="200" label="标题" align="center" prop="title" />
        <el-table-column min-width="150" label="版本" align="center" prop="version" />
        <el-table-column min-width="150" label="状态" align="center" prop="type">
            <template #default="scope">
            <div>{{ scope.row.status == 1?'可用':'不可用'}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button>
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
        </el-table-column>
        <!-- <el-table-column label="创建时间" align="center" width="160" prop="createTime">
        <template #default="scope">
            <span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
        </el-table-column> -->
      </el-table>
      <!-- <div v-if="total > 10" style="display: flex;justify-content: right;padding-top: 20px;">
        <el-pagination
          v-model:current-page="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="querytype"
        />
      </div> -->
      
    </div>
      <!--:row-style="{background: '#cde0f3'}"-->
      
      <!--添加字典类型-->
      <el-dialog 
        v-model="popshow" 
        :title="poptit" 
        width="800px" 
        append-to-body
        align-center
        :close-on-click-modal="false"
      >
        <el-form ref="typeform" :model="addObj" :rules="rules" label-width="120px">
            <el-form-item label="小程序" prop="appid">
            <el-select v-model="addObj.appid" placeholder="请选择协议类型" style="width: 100%">
                <el-option v-for="(n,i) in yxtype" :key="i" :label="n.dictName" :value="n.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="协议类型" prop="type">
            <el-select v-model="addObj.type" placeholder="请选择协议类型" style="width: 100%">
                <el-option :key="1" label="服务条款" value="1" />
                <el-option :key="2" label="隐私协议" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="addObj.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <div style="width: 100%;">
                <QuillEditor
                    style="width: 100%;height: 300px;"
                    theme="snow"
                    :options="editorOptions"
                    v-model:content="addObj.content"
                    contentType="html"
                />
            </div>
            
            <!-- <el-input v-model="addObj.content" placeholder="请输入内容" /> -->
          </el-form-item>
          <el-form-item label="版本" prop="version">
            <el-input v-model="addObj.version" placeholder="请输入版本" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="addObj.status" placeholder="请选择协议类型" style="width: 100%">
                <el-option :key="1" label="可用" value="1" />
                <el-option :key="2" label="不可用" value="0" />
            </el-select>
        </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="save">确 定</el-button>
            <el-button @click="canceltype">取 消</el-button>
          </div>
        </template>
      </el-dialog>
  
    </div>
  </template>
  
  <script lang="ts" setup>
    import { 
      getdicttype,
      adddicttype,
      update,
      deltype
    } from '@/api/systemSet/agreement'
    import { ref,reactive} from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { showLoading,hideLoading } from '@/utils/loading'
    import { getdict } from '@/api/systemSet/dict'

    //引入富文本编辑器
    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    //设置富文本
    const editorOptions = reactive({
        modules: {
            toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{'size': ['small', false, 'large', 'huge']}],
            [{'font': []}],
            [{'align': []}],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'indent': '-1'}, {'indent': '+1'}],
            [{'header': 1}, {'header': 2}],
            [{'direction': 'rtl'}],
            [{'color': []}, {'background': []}]
            ],
        },
        placeholder: '请输入内容...'
    })


    let yxtype = ref<any>([])
      getdict({
        typeCode:'wxxcx'
      }).then(rps => {
        yxtype.value = rps.data
      })  

    //查询        
    let queryParams = reactive({
        appid:'',	
        type:'',	    //类型：1-服务条款，2-隐私协议 
        status:''     	//状态：1-可用，0-不可用
     })
  
     let dictlist = ref<any>([])
     function querytype() {
      dictlist.value.splice(0)
      getdicttype(queryParams).then(rps => {
        dictlist.value = rps.data
      })
     }
  
     let queryRef = ref()
     function resetQuery() {
      queryRef.value?.resetFields()
     }
  
     function search() {
      querytype()
     } 
    
     function handleSizeChange(val:number) {
        querytype()
     }
  
     //新增、修改
     let cztype = ref(1)
     let typeform = ref()
     let popshow = ref(false) 
     let poptit = ref('添加协议')
     let addObj = reactive({
        appid:'',
        type:'',	    //类型：1-服务条款，2-隐私协议
        title:'',	    //标题
        content:'',	    //协议内容
        version:'',	    //版本
        status:'1',     	//状态：1-可用，0-不可用
        pkId:''
      })
      const rules = {
        appid: [
            { required: true, message: "请选择小程序", trigger: "blur" },
        ],
        type: [
            { required: true, message: "请选择服务条款", trigger: "blur" },
        ],
        title:[
            { required: true, message: "请输入标题", trigger: "blur" },
        ],
        content:[
            { required: true, message: "请输入协议内容", trigger: "blur" },
            { required: true, validator(rule:any, value:any, callback:any) {
                if(value == '<p></p>' || value == '<p><br></p>'){
                    return callback(new Error('请输入协议内容'))
                }
                return callback()
            }, trigger: "blur"}
        ],
        version:[
            { required: true, message: "请输入版本", trigger: "blur" },
        ]
      }

      function caoztype(obj:any) {
        if(cztype.value == 1){
          return adddicttype(obj) 
        }
        return update(obj)
      }
  
      function showpop(type:number,row?:any) {
        cztype.value = type
        popshow.value = true
        poptit.value = type == 1?'添加协议':'修改协议'
        typeform.value?.resetFields()
        if(row){
          addObj.pkId = row.pkId
          addObj.appid = row.appid
          addObj.type = row.type+''
          addObj.title = row.title	    
          addObj.content = decodeURIComponent(row.content)	    
          addObj.version = row.version	    
          addObj.status = row.status +''   
        }else{
          addObj.pkId = ''
          addObj.appid = ''
          addObj.type = ''
          addObj.title = ''	    
          addObj.content = '<p></p>'	    
          addObj.version = ''	      
          addObj.status = '1' 
        }
      }
      
      //保存
      function save() {
        typeform.value?.validate((valid:Boolean) => {
          if (valid) {
            showLoading()
            caoztype(Object.assign({},addObj,{content:encodeURIComponent(addObj.content)})).then(() => {
              hideLoading()
              ElMessage({
                type: 'success',
                message: cztype.value == 1?'添加成功':'修改成功'
              })
              setTimeout(() => {
                popshow.value = false
                search()
              },1000)
            }).catch(() => {
                hideLoading()
            })
          }
        })
      }
  
      //删除
      function handleDelete(row:any) {
        ElMessageBox.confirm(
        `确定删除：${row.title}`,
        '温馨提示',
        {
          // confirmButtonText: '',
          // cancelButtonText: 'Cancel',
          type: 'warning',
        }
      ).then(() => {
        deltype(row.pkId).then(rps => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            querytype()
          })
        })
      }
  
      function canceltype() {
        popshow.value = false
      }

     querytype()
  </script>
  