<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="page.data">
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addOrUpdate()"
        >添加账号</el-button>
      </el-form-item>
      <el-form-item class="margin-left input">
        <!--        <el-input
          v-model="page.data.account"
          placeholder="请输入账号"
          clearable
        />-->
        <el-select
          v-model="page.data.account"
          clearable
          placeholder="请选择账号"
        >
          <el-option label="账号A" value="a" />
          <el-option label="账号B" value="b" />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.contactsName"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input">
        <el-input
          v-model="page.data.contactsPhone"
          placeholder="请输入手机号"
          clearable
        />
      </el-form-item>
      <el-form-item class="margin-left input" style="width: 170px">
        <el-select
          v-model="page.data.type"
          clearable
          placeholder="是否开启快速入园"
        >
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item class="margin-left">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      class="table"
    >
      <el-table-column align="center" width="80" label="序号">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="username" label="账号名称" />
      <el-table-column align="center" prop="contactsName" label="负责人姓名" />
      <el-table-column align="center" prop="contactsPhone" label="负责人手机号" />
      <el-table-column label="单位详细地址" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.address | matchNull }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="onSale" label="是否开启快速入园">
        <template v-slot="{ row }">
          <el-tag v-if="row.type == 1" type="primary">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="景区照片" align="center">
        <template v-slot="{ }">
          <el-image
            style="width: 100px; height: 100px"
            :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
              'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]"
          />
        </template>
      </el-table-column>
      <el-table-column label="入园二维码" align="center">
        <template v-slot="{ }">
          <el-image
            style="width: 100px; height: 100px"
            :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作区" width="210">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="addOrUpdate(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 添加/编辑账号 -->
    <UpdateModal ref="updateModel" @success="modalSuccess" />
    <!-- 图片放大 -->
    <el-dialog :visible.sync="previewImageVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import { doGetBuyer, doDeleteBuyer } from '@/api/buy';
import UpdateModal from './UpdateModal';
export default {
  components: { Pagination, UpdateModal },
  filters: {
    matchNull(str) {
      if (!str) {
        return '未填写';
      } else {
        return str;
      }
    }
  },
  data() {
    return {
      listLoading: false,
      submitLoading: false,
      dialogTitle: '',
      dialogVisible: false,
      total: 0,
      // 分页参数
      page: {
        data: {
          account: '',
          contactsName: '',
          contactsPhone: '',
          type: '' // 是否开启快速入园
        },
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      isEdit: false, // 判断是否是编辑
      // 省市县列表
      province_list: [],
      city_list: [],
      area_list: [],
      // 规则
      rules: {
      },
      previewImageVisible: false,
      dialogImageUrl: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      doGetBuyer(this.page).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 添加编辑账号
    addOrUpdate(edit) {
      this.$nextTick(() => {
        if (edit) {
          // 修改
          console.log(edit, '编辑操作...');
          this.$refs.updateModel.open(Object.assign({}, edit));
          this.isEdit = true;
        } else {
          this.$refs.updateModel.open();
          // 添加
          this.isEdit = false;
        }
      });
    },
    // 删除账号
    handleDelete(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        doDeleteBuyer(id).then((res) => {
          this.fetchData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      });
    },
    clearPageParams() {
      this.page = {
        data: {
          account: '',
          contactsName: '',
          contactsPhone: '',
          type: '' // 是否开启快速入园
        },
        pageNum: 1,
        pageSize: 10
      };
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams();
      }
      this.fetchData();
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}
.flex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.form-title{
  position: relative;
  padding: 0 10px;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;

  &:before {
     position: absolute;
     content: "";
     left: 0;
     top: calc(50% - 8px);
     width: 3px;
     height: 16px;
     background-color: rgba(64, 158, 255, 1);
     border-radius: 13px;
   }
}
.table {
  margin-top: 15px;
}
</style>
