<template>
  <div>
    <div class="form-title">补充数据</div>
    <div class="artwork-modal-content">
      <div class="row">
        <div class="col-12 col-md-6 box-border fl-pr-md">
          <div class="border-radius-16 fl-pa-md border-1">
            <div class="row">
              <div class="col-3 fl-mt-sm title">艺术类别</div>
              <div class="col-8 row items-center">
                <fl-select :disabled="calcItemDisable()"
                           :config="{
                    optionConfig: {
                      type: 'post',
                      url: 'artwork/cat-list',
                      params: [
                        {
                          label: 'Pid',
                          value: 4,
                        },
                      ],
                      labelField: 'CatName',
                      valueField: 'Id',
                    },
                  }"
                           :defaultVal="state.formData.ArtType"
                           @triggerChangeVal="(e) => handleSelectChange(e, 'ArtType')"></fl-select>
              </div>
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">艺术主题</div>
              <div class="col-8 row items-center">
                <fl-select :disabled="calcItemDisable()"
                           :config="{
                    optionConfig: {
                      type: 'post',
                      url: 'artwork/cat-list',
                      params: [
                        {
                          label: 'Pid',
                          value: 39,
                        },
                      ],
                      labelField: 'CatName',
                      valueField: 'Id',
                    },
                  }"
                           :defaultVal="state.formData.ArtTitle"
                           @triggerChangeVal="(e) => handleSelectChange(e, 'ArtTitle')"></fl-select>
              </div>
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">风格</div>
              <div class="col-8 row items-center">
                <fl-select :disabled="calcItemDisable()"
                           :config="{
                    optionConfig: {
                      type: 'post',
                      url: 'artwork/cat-list',
                      params: [
                        {
                          label: 'Pid',
                          value: 40,
                        },
                      ],
                      labelField: 'CatName',
                      valueField: 'Id',
                    },
                  }"
                           :defaultVal="state.formData.ArtStyle"
                           @triggerChangeVal="(e) => handleSelectChange(e, 'ArtStyle')"></fl-select>
              </div>
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">颜色</div>
              <div class="col-8 row items-center">
                <fl-select :disabled="calcItemDisable()"
                           :config="{
                    optionConfig: {
                      type: 'post',
                      url: 'artwork/cat-list',
                      params: [
                        {
                          label: 'Pid',
                          value: 42,
                        },
                      ],
                      labelField: 'CatName',
                      valueField: 'Id',
                    },
                  }"
                           :defaultVal="state.formData.Color"
                           @triggerChangeVal="(e) => handleSelectChange(e, 'Color')"></fl-select>
              </div>
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">笔墨技法</div>
              <fl-form-item type="text"
                            class="col-8 "
                            placeholder="请输入内容"
                            field="PenTechniques"
                            :val="state.formData.PenTechniques"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">绘画思想</div>
              <fl-form-item type="text"
                            class="col-8 "
                            placeholder="请输入内容"
                            field="ArtIdea"
                            :val="state.formData.ArtIdea"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">表达思想</div>
              <fl-form-item type="text"
                            class="col-8 "
                            placeholder="请输入内容"
                            field="ExpressIdea"
                            :val="state.formData.ExpressIdea"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />
            </div>

            <div class="row">
              <div class="col-3 fl-mt-sm title">创作背景故事</div>
              <fl-form-item type="textarea"
                            class="col-8 "
                            placeholder="请输入内容"
                            :rows="6"
                            field="ArtStory"
                            :val="state.formData.ArtStory"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6">
          <div class="height-100 border-radius-16 border-1 fl-pa-md">
            <div style="
                border-bottom: 1px solid #000;
                font-size: 18px;
                font-weight: bolder;
              ">
              网络痕迹
            </div>
            <div class="row justify-center fl-mt-md">
              <div class="col-3 title">首次发表url</div>
              <fl-form-item type="textarea"
                            class="col-9 "
                            placeholder="请输入内容"
                            :rows="2"
                            field="FirstPublish"
                            :val="state.formData.FirstPublish"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />
              <div class="col-4 fl-my-md">
                <fl-upload :otherParams="{
                    source: 'artwork',
                    mask: fatherData?.ArtworkUuid,
                    type: 'image',
                  }"
                           :val="state.formData.FirstPublish_img"
                           :disable="calcItemDisable()"
                           @triggerUpload="(e) => handleUpload('FirstPublish_img', e)"></fl-upload>
              </div>
            </div>

            <div class="row justify-center">
              <div class="col-3 fl-mt-sm title">首次命名url</div>
              <fl-form-item type="textarea"
                            class="col-9 "
                            placeholder="请输入内容"
                            :rows="2"
                            field="FirstName"
                            :val="state.formData.FirstName"
                            :disable="calcItemDisable()"
                            @triggerValChange="handleValChange" />

              <div class="col-4 fl-my-md">
                <fl-upload :otherParams="{
                    source: 'artwork',
                    mask: fatherData?.ArtworkUuid,
                    type: 'image',
                  }"
                           :val="state.formData.FirstName_img"
                           :disable="calcItemDisable()"
                           @triggerUpload="(e) => handleUpload('FirstName_img', e)"></fl-upload>
              </div>
            </div>
            <div class="row justify-center">
              <div class="col-3 fl-mt-sm title">发表地址</div>
              <fl-form-item type="address"
                            class="col-9 "
                            placeholder="请输入内容"
                            field="PublishAddressName"
                            :val="state.formData.PublishAddressName"
                            :disable="calcItemDisable()||(!calcItemDisable()&&state.formData.CopyrightStep===1)"
                            @triggerValChange="handleValChange" />

            </div>

            <div class="row justify-center fl-mt-sm">
              <div class="col-3 fl-mt-sm title">发表时间</div>
              <fl-form-item type="date"
                            class="col-9 "
                            placeholder="请选择时间"
                            field="PublishDate"
                            :val="state.formData.PublishDate"
                            :disable="calcItemDisable()||(!calcItemDisable()&&state.formData.CopyrightStep===1)"
                            @triggerValChange="handleValChange" />

            </div>
          </div>
        </div>
      </div>

      <div class="border-radius-16 fl-pa-md border-1 fl-mt-md">
        <div style="
            border-bottom: 1px solid #000;
            font-size: 18px;
            font-weight: bolder;
          "
             class="row justify-between">
          第三方或策展人评论
          <div class="fl-mb-sm">
            <a-button type="primary"
                      v-permission="'r_artwork_view_btn_extraedit'"
                      class="fl-mr-sm"
                      shape="round"
                      @click="handleThirdAdd"
                      :loading="state.btnLoading">添加</a-button>

            <a-popconfirm title="确定?"
                          ok-text="是的"
                          canca-text="放弃"
                          @confirm="handleThirdDelete">
              <a-button type="info"
                        v-permission="'r_artwork_view_btn_extraedit'"
                        class="fl-mr-sm"
                        shape="round"
                        :loading="state.btnLoading">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
        <div class="row third-table">
          <fl-table specialTable="extraartwork"
                    tableType=""
                    :config="state.thirdTableConfig"
                    :fatherData="fatherData"
                    :refreshCount="state.thirdTableConfig.refreshCount"
                    :createCount="state.thirdTableConfig.createCount"
                    :deleteCount="state.thirdTableConfig.deleteCount"
                    :innerCreateLimit="false"
                    @triggerRowActions="handleRowActions"
                    @triggerRowEditActions="handleRowEditActions" />
        </div>
      </div>
    </div>

    <div class="text-right fl-my-sm">
      <a-button type="primary"
                v-permission="'r_artwork_view_btn_extraedit'"
                shape="round"
                style="width: 131px"
                :disabled="calcItemDisable()"
                @click="handleSave"
                :loading="state.btnLoading">保存
      </a-button>
    </div>
  </div>
</template>
<script setup>
import { reactive, onBeforeMount, getCurrentInstance } from "vue";
import flUpload from "@/components/layout/upload/commonUpload.vue";
import flTable from "@/components/layout/table/commonTable.vue";
import { processError, processSuccess } from "@/utils/helper/message";
import flSelect from "@/components/layout/select/common.vue";
import flFormItem from "@/components/layout/form/formItem.vue";

const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;

let props = defineProps({
  fatherData: Object,
  pageType: String,
});

const state = reactive({
  btnLoading: false,
  formData: {
    ArtType: "", //艺术类别
    ArtTitle: "", //艺术主题
    ArtStyle: "", //艺术风格
    Color: "", //颜色
    PenTechniques: "", //笔墨技法
    ArtIdea: "", //绘画思想
    ExpressIdea: "", //表达思想
    ArtStory: "", //创作背景故事
    FirstPublish: "", //首次发表
    FirstPublish_img: "", //首次发表图片
    FirstName: "", //首次命名
    FirstName_img: "", //首次命名图片
    Id: 10, //唯一标识ID，有则更新 没有新建
    ArtworkUuid: "", //画作uuid
    PublishAddressName: '',
    PublishAddressCode: '',
    PublishDate: '',
    CopyrightStep: null,
  },
  thirdTableConfig: {
    createCount: 0,
    refreshCount: 0,
    deleteCount: 0,
    hasSelection: true,
    noSelectAll: true,
    rowKey: "third_id",
    mulDeleteConfig: {
      url: "artwork/third-party-del",
      keyField: "ThirdIds",
    },
    listUrl: {
      url: "artwork/third-party-list",
      params: [
        {
          label: "ArtworkUuid",
          field: "ArtworkUuid",
        },
      ],
    },
    columns: [
      {
        type: "video",
        title: "视频",
        field: "video_url",
        editConfig: {
          posterField: "video_cover",
          type: "upload",
          source: "artwork",
          mask: "ArtworkUuid",
          fileType: "video",
        },
      },
      {
        title: "评论人",
        field: "commenter",
        editConfig: { type: "input" },
      },
      {
        title: "评论内容",
        field: "comment_content",
        editConfig: { type: "input" },
      },
      {
        title: "链接地址",
        field: "link_url",
        editConfig: { type: "input" },
      },
      {
        actions: [
          {
            actionType: "edit",
            permission: "r_artwork_view_btn_extraedit",
            type: "primary",
            icon: "edit",
            shape: "circle",
            class: "fl-ma-sm",
          },
          {
            actionType: "delete",
            permission: "r_artwork_view_btn_extraedit",
            type: "danger",
            icon: "delete",
            shape: "circle",
            class: "fl-ma-sm",
            actionUrl: {
              url: "artwork/third-party-del",
              params: [
                {
                  type: "Array",
                  label: "ThirdIds",
                  field: "third_id",
                },
              ],
            },
          },
        ],
        editConfig: {
          type: "actions",
          actions: [
            {
              actionType: "innerCreate",
              label: "确认",
              type: "primary",
              shape: "round",
            },
          ],
        },
      },
    ],
  },
});
onBeforeMount(() => {
  getPageData();
});
const getPageData = () => {
  let url = "artwork/detail";
  let params = {
    ArtworkUuid: props.fatherData.ArtworkUuid,
    Type: "3",
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.formData = res.data.ExtDataInfo;
      } else {
        processError(res.msg || "获取数据失败");
      }
    },
    (err) => {
      processError(err || "获取数据失败");
    }
  );
};

const calcItemDisable = () => {
  return !$hadRule("r_artwork_view_btn_extraedit");
};
const handleUpload = (field, val) => {
  state.formData[field] = val;
};

const handleSave = () => {
  let url = "artwork/ext-data";
  state.btnLoading = true;
  $request.HTTP.components.putDataByParams(url, state.formData).then(
    (res) => {
      if (res.status === 0) {
        processSuccess("操作成功!");
        getPageData();
      } else {
        processError(res.msg || "操作失败!");
      }
      state.btnLoading = false;
    },
    (err) => {
      state.btnLoading = false;
      processError(err.message);
    }
  );
};
const handleThirdAdd = () => {
  state.thirdTableConfig.createCount++;
};
const handleThirdDelete = () => {
  state.thirdTableConfig.deleteCount++;
};
const handleRowActions = (config, rowData) => { };
const handleRowEditActions = (config, rowData) => {
  if (config.actionType === "innerCreate") {
    config.btnLoading = true;
    delete rowData.rowEdit;
    let url = "artwork/third-party-edit";
    let params = {
      ThirdId: rowData.third_id,
      ArtworkUuid: props.fatherData.ArtworkUuid,
      ThirdComment: JSON.stringify(rowData),
    };
    $request.HTTP.components.putDataByParams(url, params).then(
      (res) => {
        if (res.status === 0) {
          processSuccess("操作成功!");
        } else {
          processError(res.msg || "操作失败!");
        }
        config.btnLoading = false;
      },
      (err) => {
        config.btnLoading = false;
        processError(err.message);
      }
    );
  }
};
const handleSelectChange = (val, field) => {
  state.formData[field] = val.value;
};

const handleValChange = (val, field) => {
  if (field === 'PublishAddressName') {
    state.formData.PublishAddressName = val.province.value + (val.city.value ? ',' : '') + val.city.value;
    state.formData.PublishAddressCode = val.province.code + (val.city.code ? ',' : '') + val.city.code;
    return
  }
  state.formData[field] = val;
};
</script>
<style scoped lang="scss">
.title {
  font-size: 14px;
  /* font-weight: bold; */
  color: #000;
}
// .border-1 {
//   border: rgb(71, 70, 70) 1px solid;
// }
.third-table :deep(.ant-table-thead > tr > th) {
  padding: 4px;
}
.third-table :deep(.ant-table-thead th:first-child) {
  border-radius: 15px 0 0 15px;
}
.third-table :deep(.ant-table-thead th:last-child) {
  border-radius: 0 15px 15px 0;
}

.anchor-div {
  height: 400px;
  padding: 4px;
  padding-bottom: 33px;
  overflow: auto;
}
.anchor-div :deep(.ant-table-thead > tr > th) {
  padding: 4px;
}
.anchor-div :deep(.ant-table-thead th:first-child) {
  border-radius: 15px 0 0 15px;
}
.anchor-div :deep(.ant-table-thead th:last-child) {
  border-radius: 0 15px 15px 0;
}
.warehouse :deep(.ant-anchor) {
  display: flex;
}

:deep(.form-item) {
  margin: 0 !important;
}
:deep(.ant-input) {
  background: transparent;
  // border-radius: 20px 0 0 20px;
  border-radius: 20px;
  color: #000 !important;
}
:deep(.ant-input-affix-wrapper) {
  background: #ffffff !important;
  border-radius: 0 !important;
  // background: rgba($color: #777777, $alpha: 0.4) !important;
  // border-radius: 20px;
}
:deep(.ant-picker) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85) !important;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  padding: 4px 11px 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px !important;
  transition: border 0.3s, box-shadow 0.3s;
}
:deep(.ant-picker-input > input) {
  color: #000 !important;
}
</style>
