<template>
  <div class="app-container">
    <div class="page-header">轮播图管理</div>
    <el-divider></el-divider>

    <div class="btn-group">
      <el-button type="primary" size="small" @click=";(dialogVisible = true), (type = 1)">新增</el-button>

      <el-button size="small" type="danger" @click="batchDelete()">删除</el-button>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="轮播图名称"
          prop="imgCarouselName"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="轮播图" prop="imgCarouselUrl" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <a :href="scope.row.imgCarouselUrl">
              <img :src="imageURL + scope.row.imgCarouselUrl" alt="轮播图" class="el-image__inner el-image__preview" />
            </a>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="imgCarouselOrder"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          min-width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="z-index: 99">
              <el-tag type="success" v-if="scope.row.status == '1'">显示</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status == '0'">隐藏 </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)">编辑</el-button>

            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '1'"
              >隐藏</el-button
            >
            <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '0'"
              >显示</el-button
            >

            <el-popconfirm
              title="确定要删除这张轮播图吗？"
              style="margin-left: 10px"
              @onConfirm="hanleDelete(scope.row.id)"
            >
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!--      <div style="margin: 20px 0">-->
      <!--        <el-pagination-->
      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="currentPage"-->
      <!--          :page-sizes="[10, 20, 30, 50]"-->
      <!--          :page-size="10"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="listTotal"-->
      <!--        >-->
      <!--        </el-pagination>-->
      <!--      </div>-->
    </div>

    <!-- 添加公司备案信息 -->
    <div>
      <div class="setting_title">备案管理</div>
      <el-divider></el-divider>

      <el-card shadow="never" class="my-card">
        <el-form class="my-form" ref="mainForm" :model="comPanyDialogForm" label-width="120px" label-position="right">
          <el-form-item label="ICP备案:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.icpRecord"></el-input>
          </el-form-item>

          <el-form-item label="ICP备案链接:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.icpRecordLink"></el-input>
            (填写链接，可跳转至链接页面)
          </el-form-item>

          <el-form-item label="公网安备案:" prop="nickName">
            <el-input autocomplete="off" placeholder="请输入" v-model="comPanyDialogForm.pubSecurityRecord"></el-input>
          </el-form-item>

          <el-form-item label="公网安备案链接:" prop="nickName">
            <el-input
              autocomplete="off"
              placeholder="请输入"
              v-model="comPanyDialogForm.pubSecurityRecordLink"
            ></el-input>
            (填写链接，可跳转至链接页面)
          </el-form-item>

          <div class="setting_title">公司名称管理</div>
          <el-divider></el-divider>

          <el-form-item label="公司名称:" prop="nickName">
            <el-input autocomplete="off" placeholder="单行输入" v-model="comPanyDialogForm.companyName"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="page-footer">
      <div class="footer">
        <!--        <el-button type="primary" @click="editFn">修改</el-button>-->
        <el-button type="primary" @click="addComPany">确定</el-button>
      </div>
    </div>

    <div>
      <el-dialog :visible.sync="dialogVisible" width="50%" @close="resetForm" :close-on-click-modal="false">
        <el-form ref="dialogForm" :model="dialogForm" :rules="type == 1 ? rules : ''" label-width="120px" size="normal">
          <el-form-item label="轮播图名称" prop="saleCode">
            <el-input v-model="dialogForm.imgCarouselName"></el-input>
          </el-form-item>

          <el-form-item label="轮播图" prop="fileUrl">
            <ImageUpload :fileList="fileList" :multiple="true" />
          </el-form-item>

          <el-form-item label="排序" prop="mainId">
            <el-input v-model="dialogForm.imgCarouselOrder"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click=";(dialogVisible = false), resetForm()">取 消</el-button>
          <el-button type="primary" @click="addImgCarousel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Mixin from '@/mixin/index'
import Pagination from '@/components/Pagination'
import ImageUpload from '@/components/Common/image-upload.vue'
import {
  getProductList,
  getImgCarouseList,
  handleImgIsShow,
  addImgCarousel,
  delImgData,
  addCompany,
  editImgCarousel,
  getCompanyList
} from '@/api/policy_list'

export default {
  mixins: [Mixin],
  data() {
    return {
      imageURL: this.$imageUrl,
      type: 0, // 0,1
      screenForm: {
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: ''
      },
      dialogForm: {
        id: '',
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: '1'
      },
      comPanyDialogForm: {
        id: '',
        icpRecord: '',
        icpRecordLink: '',
        pubSecurityRecord: '',
        pubSecurityRecordLink: '',
        companyName: ''
      },

      dataList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          label: '姓名',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      columns: [
        {
          prop: 'imgCarouselName',
          lable: '轮播图名称',
          widht: 160
        },
        {
          prop: 'imgCarouselUrl',
          lable: '轮播图',
          widht: 200
        },

        {
          prop: 'imgCarouselOrder',
          lable: '排序',
          widht: 160
        },
        {
          prop: 'createTime',
          lable: '创建时间',
          widht: 160
        },
        {
          prop: 'status',
          lable: '状态',
          widht: 120
        }
      ],

      rules: {
        imgCarouselName: [{ required: true, message: '请输入轮播图名称', trigger: 'blur' }]
        // saleName: [
        //   { required: true, message: "请输入销售类型名称", trigger: "blur" },
        // ],
        // mainName: [
        //   { required: true, message: "请输入品类名称", trigger: "blur" },
        // ],
      },
      productList: [],
      fileList: [],
      multipleSelection: []
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        saleCode: this.screenForm.saleCode,
        saleName: this.screenForm.saleName,
        mainId: '',
        status: this.screenForm.status
      }
      getCompanyList().then(res => {
        if (res.data) {
          ;(this.comPanyDialogForm.id = res.data[0].id),
            (this.comPanyDialogForm.icpRecord = res.data[0].icpRecord),
            (this.comPanyDialogForm.icpRecordLink = res.data[0].icpRecordLink),
            (this.comPanyDialogForm.pubSecurityRecord = res.data[0].pubSecurityRecord),
            (this.comPanyDialogForm.pubSecurityRecordLink = res.data[0].pubSecurityRecordLink),
            (this.comPanyDialogForm.companyName = res.data[0].companyName)
        }
      })

      getImgCarouseList(params).then(res => {
        this.dataList = res.data
        this.listLoading = false
      })
    },
    handleChange(e) {
      this.productList.find(k => {
        if (k.productCategoryNumber == e) {
          this.dialogForm.mainId = k.productCategoryNumber
          this.dialogForm.mainName = k.productCategoryName
          this.screenForm.mainId = k.productCategoryNumber
          this.screenForm.mainName = k.productCategoryName
        }
      })
    },
    hanleDelete(id) {
      this.hanleDeleteAllPromise(id).then(ids => {
        delImgData({
          ids: ids[0]
        }).then(res => {
          this.$successMsg('删除成功')
          this.hanleReset()
        })
      })
    },
    hanleEdit(item) {
      this.dialogForm = {
        id: item.id,
        companyRecordManageId: item.companyRecordManageId,
        imgCarouselName: item.imgCarouselName,
        imgCarouselUrl: item.imgCarouselUrl,
        imgCarouselOrder: item.imgCarouselOrder,
        status: item.status
      }
      this.type = 0
      this.dialogVisible = true
    },
    hanleDateil(item) {
      this.dialogVisible = true
      this.dialogForm = {
        ...item
      }
      this.type = 3
    },

    hanleStatus(id) {
      handleImgIsShow({
        id: id
      }).then(res => {
        this.$successMsg('状态已更改')
        this.hanleReset()
      })
    },

    addImgCarousel() {
      if (this.type == 1) {
        this.$refs.dialogForm.validate(valid => {
          //console.log(...this.dialogForm)
          if (valid) {
            this.dialogForm.imgCarouselUrl = this.fileList[0].url
            const params = {
              ...this.dialogForm
            }
            addImgCarousel(params).then(res => {
              this.$successMsg('添加成功')
              this.hanleReset()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.type == 0) {
        const upParams = {
          ...this.dialogForm
        }
        editImgCarousel(upParams).then(res => {
          this.$successMsg('修改成功')
          this.hanleReset()
        })
      } else {
        this.dialogVisible = false
      }
    },
    // 表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    //添加公司信息
    addComPany() {
      const params = {
        ...this.comPanyDialogForm
      }
      addCompany(params).then(res => {
        this.$successMsg('添加成功')
        this.hanleReset()
      })
    },
    resetForm(formName) {
      this.$refs.dialogForm.resetFields()
    },
    hanleReset() {
      this.dialogForm = {
        companyRecordManageId: '',
        imgCarouselName: '',
        imgCarouselUrl: '',
        imgCarouselOrder: '',
        status: '1'
      }
      // this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
      this.getList()
    },
    batchDelete() {
      if (this.multipleSelection.length < 1) {
        return this.$errorMsg('请选择信息')
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let ids = []
          this.multipleSelection.forEach(item => {
            ids.push(item.id)
          })
          delImgData({ ids: ids.join(',') }).then(res => {
            this.$successMsg('删除成功')
            this.hanleReset()
          })
        })
        .catch(() => {})
    }
  },
  created() {
    // this.getList();
  },
  components: {
    Pagination,
    ImageUpload
  }
}
</script>

<style scoped>
.el-switch.is-disabled {
  opacity: inherit;
}
.page-header {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: 600;
}
.cname-footer {
  margin-top: 15px;
}
.my-form {
  width: 60%;
}
</style>
