<template>
  <div class="main" style="text-shadow: 0 0 20px var(--font-border);overflow:scroll">
    <div class="HeadLine" style="margin-top:30px;margin-left:15px;">
      <div class="HeadSquare" ></div>
      <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-platform"></i>网站管理</div>
    </div>
    <div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;margin-left:20px">
      <el-row>
        <el-col :span="24">
          <el-button @click="openAddCategoryFun()" type="primary" plain size="medium" round >新增网址</el-button>
        </el-col>
<!--        <el-col :span="24" style="margin-top:20px">-->
<!--          <el-input-->
<!--              placeholder="请输入内容"-->
<!--              v-model="searchCate"-->
<!--              clearable-->
<!--              style="width:200px">-->
<!--          </el-input>-->
<!--          <el-button type="success" plain size="medium" round style="margin-left:10px">查询标签</el-button>-->
<!--        </el-col>-->
      </el-row>
      <el-table class="MyTable"
                :data="List"
                header-row-class-name="table_header_class"
                border
                max-height="500"
               >
        <el-table-column
            align="center"
            type="index"
            :index="hIndex"
            prop="date"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            align="center"
            style="display: none"
            prop="parentId"
            label="所属编号"
            width="50">
        </el-table-column>
        <el-table-column
            align="center"
            prop="urlId"
            label="网站编号"
            width="100">
        </el-table-column>
        <el-table-column align="center" prop="url" label="网站URL" width="150">
          <template slot-scope="scope">
            <el-tooltip v-if="(scope.row.url) != null && (scope.row.url).length > 12"  placement="top" width="150"
                        trigger="hover"
                        effect="dark" close-delay="2000">
              <div class="MyPopover" slot="content">{{scope.row.url}}</div>
              <div>
                <span v-if="(scope.row.url) == null">暂无</span>
                <span v-else-if="(scope.row.url).length < 12">{{scope.row.url}}</span>
                <span v-else-if="(scope.row.url).length > 12">{{ scope.row.url.substr(0,12)}}...</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="tags"
            label="网站Tag"
            width="150">
        </el-table-column>
        <el-table-column align="center"  prop="icon" label="网站Icon" width="150">
          <template slot-scope="scope">
            <div v-if="(scope.row.icon) != null && (scope.row.icon).length < 12">
              {{scope.row.icon}}
            </div>
            <el-tooltip v-else-if="(scope.row.icon) != null && (scope.row.icon).length >= 12"  placement="top" width="150"
                        trigger="hover"
                        effect="dark" close-delay="2000">
              <div class="MyPopover" slot="content">{{scope.row.icon}}</div>
              <div>
                <span v-if="(scope.row.icon).length < 12">{{scope.row.icon}}</span>
                <span v-else-if="(scope.row.icon).length > 12">{{ scope.row.icon.substr(0,12)}}...</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" key="name" prop="name" label="网站名" width="190">
          <template slot-scope="scope">
            <el-tooltip  placement="top" width="150"
                         trigger="hover"
                         effect="dark" close-delay="2000">
              <div class="MyPopover" slot="content">{{scope.row.name}}</div>
              <div>
                <span>{{ scope.row.name.substr(0,12)}}</span>
                <span v-if="(scope.row.name).length > 12">...</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="root"
            label="所属分类"
            width="100">
        </el-table-column>
        <el-table-column
            align="center"
            prop="createtime"
            label="创建时间"
            width="140">
        </el-table-column>
        <el-table-column align="center" key="desc" prop="desc" label="描述" width="200">
          <template slot-scope="scope">
            <div v-if="(scope.row.desc) != null && (scope.row.desc).length < 12">
              {{scope.row.desc}}
            </div>
            <el-tooltip v-else-if="(scope.row.desc) != null && (scope.row.desc).length >= 12"  placement="top" width="150"
                         trigger="hover"
                         effect="dark" close-delay="2000">
              <div class="MyPopover" slot="content">{{scope.row.desc}}</div>
              <div>
                <span v-if="(scope.row.desc).length < 12">{{scope.row.desc}}</span>
                <span v-else-if="(scope.row.desc).length > 12">{{ scope.row.desc.substr(0,12)}}...</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="agentHint"
            label="代理提示语"
            width="100">
        </el-table-column>
        <el-table-column align="center" key="status" prop="status" label="启用状态" width="90" >
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" key="needLogin" prop="needLogin" label="公开状态" width="90">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.needLogin"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" key="isNeedAgent" prop="isNeedAgent" label="是否需要代理" width="120">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.isNeedAgent"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="weigh"
            label="权重"
            width="80">
        </el-table-column>
        <el-table-column prop="date" label="操作" width="160" >
          <template slot-scope="scope">
            <div class="ButtonBlock" >
              <img class="MyButton" @click="handleEdit(scope.row)"
                   src="../../../assets/img/EditButton.svg" style="width:60px">
              <img class="MyButton" @click="handleDelete(scope.row)"
                   src="../../../assets/img/DeleteButton.svg" style="width:60px">
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="width:100%;height:100px"></div>
      <el-dialog :title="titlename" :visible.sync="openAddCategory" width="45%"
                 append-to-body
                 :close-on-click-modal="false"
                 :before-close="closeDialog"
      >
        <el-form ref="form" :rules="rules" class="login_container" :model="form"
                 style="margin-top:-10px" status-icon  label-width="100px" >
          <el-form-item label="网站URL" prop="name">
            <el-input v-model="form.url"  placeholder='网站URL'  clearable></el-input>
            <el-button @click="Analysis(form.url)" type="primary" plain size="medium" round >解析URL</el-button>
          </el-form-item>
          <el-form-item label="网站名" prop="name">
            <el-input v-model="form.name" placeholder='网站名' clearable ></el-input>
          </el-form-item>
          <el-form-item label="网站id" prop="urlId" style="display: none">
            <el-input v-model="form.urlId" placeholder='网站名' clearable ></el-input>
          </el-form-item>
          <el-form-item label="网站图标" prop="icon">
            <el-input v-model="form.icon" placeholder='网站图标' clearable ></el-input>
          </el-form-item>
          <el-form-item label="代理提示" prop="agentHint">
            <el-input v-model="form.agentHint" placeholder='代理提示' clearable ></el-input>
          </el-form-item>
          <el-form-item label="网站Tag" prop="tags">
            <el-input v-model="form.tags" placeholder='网站Tag' clearable ></el-input>
          </el-form-item>
          <el-form-item label="网站描述" prop="desc">
            <el-input v-model="form.desc" placeholder='网站描述' clearable ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="网站归类" prop="parentId">
                <el-select v-model="form.parentId" prop="parentId"
                           value-key="deviceType" placeholder="请选择">
                  <el-option
                      v-for="item in Cate"
                      :key="item.id"
                      :label="item.rootName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类权重" prop="weigh" >
                <el-input v-model="form.weigh"  placeholder='分类权重' clearable ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否启用" prop="status">
                <el-radio-group v-model="form.status" >
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="titlename=='编辑网址'">
              <el-form-item label="是否公开" prop="needLogin">
                <el-radio-group v-model="form.needLogin" >
                  <el-radio :label="1">公开</el-radio>
                  <el-radio :label="0">私有</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="需要代理" prop="isNeedAgent">
                <el-radio-group v-model="form.isNeedAgent" >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between;width:60%">
              <el-button @click="addCategory('form',titlename)" type="primary" style=";margin-top:10px">确认</el-button>
              <el-button @click="reset('form')" type="success" style=";margin-top:10px">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Vue from "vue";

export default {
  name:"WebsiteManage",
  components:{


  },
  data() {
    return {
      // 分类列表：
      Cate:[],
      // 表头名字：
      titlename:null,
      // 新增目录页面：
      openAddCategory:false,
      // 对话框显示：
      dialogVisible:false,
      // 允许对话框修改：
      isEdit:true,
      searchCate:'',
      userId:null,
      List:[],
      form:{
        id:'',
        agentHint:'',
        urlId:'',
        name:'',
        weigh:'',
        status:'',
        icon:'',
        parentId:'',
        url:'',
        tags:'',
        desc:'',
        isNeedAgent:'',
        needLogin:'',
      },
      // 校验规则
      rules: {
        name: [{ required: 'true', message: '请输入网站名', trigger: 'blur' }],
        weigh: [{ required: 'true', message: '请输入权重', trigger: 'blur' }],
        needLogin: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
        status: [{ required: 'true', message: '请输入是否启用', trigger: 'blur' }],
        icon: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
        // parentId: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
        url: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
        // tags: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
        isNeedAgent: [{ required: 'true', message: '请完善信息', trigger: 'blur' }],
      }
    }
  },
  mounted() {
    this.GetData();
  },
  created() {
    this.getUserInfo();
    // this.GetData();
  },
  computed: {},
  methods: {
    // 重置表单：
    reset(){
      this.form = {
        id:'',
        agentHint:'',
        urlId:'',
        name:'',
        weigh:'',
        status:'',
        icon:'',
        parentId:'',
        url:'',
        tags:'',
        desc:'',
        isNeedAgent:'',
        needLogin:'',
      }
    },
    // 解析网址：
    Analysis(url){
      let that = this;
      axios({
        method:'post',
        url:'/api/UrlAndCate/disposeUrl',
        params:{
          url:url
        }
      }).then(function(res){
        that.form.icon = res.data.data.iconUrl;
        that.form.name = res.data.data.title;
        that.form.desc = res.data.data.description;
        that.form.tags = res.data.data.keywords;
      });
    },
    // 删除网址：
    handleDelete(index) {
      var that=this;
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method: 'post',
          // 请求的地址
          url: '/api/admin/weblist/deleteUrl',
          // URL 中的查询参数
          params: {
            urlId:index.urlId,
          }
        }).then(function (res) {
          if (res.data.code !== 500) {
            Vue.prototype.$notify.error({
              title: '错误',
              message: "删除失败",
              offset: 50
            });
          } else {
            Vue.prototype.$notify({
              title: '成功',
              message: ('i', {style: 'color: teal'}, "删除成功"),
              type: 'success',
              offset: 50
            });
            that.GetData();
          }

        });
      }).catch(() => {
        // 点击取消:不删除了
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 关闭弹出对话框之前：
    closeDialog() {
      var that = this;
      // 先重置
      //表单重置
      that.form = {
        id:'',
        agentHint:'',
        urlId:'',
        name:'',
        weigh:'',
        status:'',
        icon:'',
        parentId:'',
        url:'',
        tags:'',
        desc:'',
        isNeedAgent:'',
        needLogin:'',
      }
      // 后关闭
      this.dialogVisible = false;
      this.openAddCategory=false;
      this.GetData();
    },
    // 新增按钮:
    openAddCategoryFun(){
      var _this = this;
      _this.titlename="新增网址";
      console.log(this.List);
      _this.openAddCategory=true;
    },
    // 编辑按钮：
    handleEdit(index) {
      var _this = this;
      this.openAddCategoryFun();
      _this.titlename="编辑网址";
      // 深拷贝
      this.form = index;
    },
    // 提交新增：
    addCategory(rulelist,title){
      var _this = this;
      console.log(this.form);
      _this.$refs[rulelist].validate((valid)=>{
        if(valid){
          if(title == "编辑网址"){
            axios({
              method: 'post',
              // 请求的地址
              url: '/api/admin/weblist/update',
              // URL 中的查询参数
              params: {
                tags:this.form.tags,
                agentHint:this.form.agentHint,
                id:this.form.urlId,
                name: this.form.name,
                weigh: this.form.weigh,
                icon:this.form.icon,
                cateId:this.form.parentId,
                status: this.form.status,
                isNeedAgent:this.form.isNeedAgent,
                url: this.form.url,
                desc: this.form.desc,
                needLogin:this.form.needLogin,
              }
            }).then(function (res) {
              if (res.data.code === 500) {
                Vue.prototype.$notify.error({
                  title: '错误',
                  message: res.data.msg,
                  offset: 50
                });
              } else {
                _this.closeDialog();
                Vue.prototype.$notify({
                  title: '成功',
                  message: ('i', {style: 'color: teal'}, "更新成功！"),
                  type: 'success',
                  offset: 50
                });
              }
            }).catch((error)=>{
            })
            this.GetData();
          }else if(title == "新增网址"){
            axios({
              method: 'post',
              // 请求的地址
              url: '/api/admin/weblist/insertUrlByUser',
              // URL 中的查询参数
              params: {
                agentHint:this.form.agentHint,
                name: this.form.name,
                weigh: this.form.weigh,
                icon:this.form.icon,
                cateId:this.form.parentId,
                status: this.form.status,
                isNeedAgent:this.form.isNeedAgent,
                url: this.form.url,
                desc: this.form.desc,
              }
            }).then(function (res) {
              if (res.data.code === 500) {
                Vue.prototype.$notify.error({
                  title: '错误',
                  message: res.data.msg,
                  offset: 50
                });

              } else {
                _this.closeDialog();
                Vue.prototype.$notify({
                  title: '成功',
                  message: ('i', {style: 'color: teal'}, "更新成功！"),
                  type: 'success',
                  offset: 50
                });
              }
            }).catch((error)=>{
            })
            this.GetData();
          }
        }
      })

      //调用方法提交

    },
    // 时间转换：
    // getFormatDate() {
    //   var that = this;
    //   for(let i = 0 ; i < that.List.length; i++){
    //     var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //     var Y = date.getFullYear() + '年';
    //     var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
    //     var D = date.getDate() + '日 ';
    //     console.log("date: " + Y + M + D);
    //     that.List[i].createtime = "" + Y + M + D;
    //   }
    // },
    // 获取条数：
    hIndex(index){
      var linenum = parseInt( parseInt(index) + parseInt(1))
      return linenum;
    },
    // 获取用户ID
    getUserInfo() {
      let _this = this;
      if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
        _this.userId = localStorage.getItem("userId")
      } else {
        Vue.prototype.$notify.error({
          title: '错误',
          message: "登录状态失效，请重新登录！",
          offset: 0
        });
      }
    },
    GetData(){
      // 获取数据
      var that = this;

      axios({
        method:'post',
        url:'/api/UrlAndCate/disposeBookmarkToJson',
        params:{
          userId: that.userId
        }
      }).then(function(res){
        var tmp = res.data;
        var tmp2 = [];
        for(let i=0;i< tmp.length;i++){
          var rootName = tmp[i].name;
          var catenum = tmp[i].cateId;
          var CateItem = {};
          CateItem['id'] = catenum;
          CateItem['rootName'] = rootName;
          that.Cate.push(CateItem);
          tmp[i].childUC = tmp[i].childUC.map(item=>{
            return{
              ...item,
              root:rootName,
              root_id:catenum
            }
          });
          tmp2 = tmp2.concat(tmp[i].childUC);
        }
        that.List = tmp2;
        for(let i = 0 ; i < that.List.length; i++){
          var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + '年';
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
          var D = date.getDate() + '日 ';
          that.List[i].createtime = "" + Y + M + D;
        }
      });
      that.form.userId = that.userId;
    },

  }

}
</script>
<style scoped>
.base-style{
  display: flex;
  flex-direction: column;
}
/**表格样式，直接复制**/
::v-deep .table_header_class th{
  background-color: var(--table-bg-color)!important;
  color:var(--theme-color);
  text-align: center;
}
.MyTable{
  overflow:auto;
  margin-top:10px;
  height:500px;
  width: 95%;
  background-color:var(--table-bg-color);
  color:var(--theme-color);
  border-radius: 5px;
}

::v-deep .el-table__body tr:hover > td {
  background-color: var(--table-bg-color-hover) !important;
}

::v-deep .el-table tr,
.el-table th.el-table__cell {
  background-color: var(--table-bg-color);
  border: var(--table-border) solid 3px;
}

::v-deep .el-table--border{
  border: var(--table-border) solid 3px;
}
.login_container {
  width: 550px;
  border: 1px solid #eaeaea;
  margin: 100px auto;
  padding: 35px 35px 15px 35px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;
  .login_title{
    color: #505458;
    text-align: center;
    margin-bottom: 40px;}
}

::v-deep .el-dialog__body{
  background-image: url("../../../assets/img/SkyPic.jpg");
  margin-top:15px;
  height:700px;
}
</style>